<!DOCTYPE html>
<html
  lang="en"
  data-bs-theme="light"
  data-menu-color="brand"
  data-topbar-color="light"
>
  <head>
    <meta charset="utf-8" />
    <title>
      UI Elements | Dashtrap - Responsive Bootstrap 5 Admin Dashboard
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      content="A fully featured admin theme which can be used to build CRM, CMS, etc."
      name="description"
    />
    <meta content="Myra Studio" name="author" />

    <!-- App favicon -->
    <link rel="shortcut icon" href="../src/assets/images/favicon.ico" />

    <!-- App css -->
    <link
      href="../src/assets/css/style.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="../src/assets/css/icons.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <script src="../src/assets/js/config.js"></script>
  </head>

  <body>
    <!-- Begin page -->
    <div class="layout-wrapper">
      <!-- ========== Left Sidebar ========== -->
      <div class="main-menu">
        <!-- Brand Logo -->
        <div class="logo-box">
          <!-- Brand Logo Light -->
          <a href="index.html" class="logo-light">
            <img
              src="../src/assets/images/logo-light.png"
              alt="logo"
              class="logo-lg"
              height="28"
            />
            <img
              src="../src/assets/images/logo-sm.png"
              alt="small logo"
              class="logo-sm"
              height="28"
            />
          </a>

          <!-- Brand Logo Dark -->
          <a href="index.html" class="logo-dark">
            <img
              src="../src/assets/images/logo-dark.png"
              alt="dark logo"
              class="logo-lg"
              height="28"
            />
            <img
              src="../src/assets/images/logo-sm.png"
              alt="small logo"
              class="logo-sm"
              height="28"
            />
          </a>
        </div>

        <!--- Menu -->
        <div data-simplebar>
          <ul class="app-menu">
            <li class="menu-title">Menu</li>

            <li class="menu-item">
              <a href="index.html" class="menu-link waves-effect waves-light">
                <span class="menu-icon"><i class="bx bx-home-smile"></i></span>
                <span class="menu-text"> Dashboards </span>
                <span class="badge bg-primary rounded ms-auto">01</span>
              </a>
            </li>

            <li class="menu-title">Custom</li>

            <li class="menu-item">
              <a
                href="apps-calendar.html"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-calendar"></i></span>
                <span class="menu-text"> Calendar </span>
              </a>
            </li>

            <li class="menu-item">
              <a
                href="#menuExpages"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-file"></i></span>
                <span class="menu-text"> Extra Pages </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuExpages">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="pages-starter.html" class="menu-link">
                      <span class="menu-text">Starter</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-invoice.html" class="menu-link">
                      <span class="menu-text">Invoice</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-login.html" class="menu-link">
                      <span class="menu-text">Log In</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-register.html" class="menu-link">
                      <span class="menu-text">Register</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-recoverpw.html" class="menu-link">
                      <span class="menu-text">Recover Password</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-lock-screen.html" class="menu-link">
                      <span class="menu-text">Lock Screen</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-404.html" class="menu-link">
                      <span class="menu-text">Error 404</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-500.html" class="menu-link">
                      <span class="menu-text">Error 500</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuLayouts"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-layout"></i></span>
                <span class="menu-text"> Layouts </span>
                <span class="badge bg-blue ms-auto">New</span>
              </a>
              <div class="collapse" id="menuLayouts">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="layout-horizontal.html" class="menu-link">
                      <span class="menu-text">Horizontal</span>
                    </a>
                  </li>

                  <li class="menu-item">
                    <a href="layout-sidenav-light.html" class="menu-link">
                      <span class="menu-text">Sidenav Light</span>
                    </a>
                  </li>

                  <li class="menu-item">
                    <a href="layout-sidenav-dark.html" class="menu-link">
                      <span class="menu-text">Sidenav Dark</span>
                    </a>
                  </li>

                  <li class="menu-item">
                    <a href="layout-topbar-dark.html" class="menu-link">
                      <span class="menu-text">Topbar Dark</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-title">Components</li>

            <li class="menu-item">
              <a
                href="#menuComponentsui"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-cookie"></i></span>
                <span class="menu-text"> UI Elements </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuComponentsui">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="ui-alerts.html" class="menu-link">
                      <span class="menu-text">Alerts</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-buttons.html" class="menu-link">
                      <span class="menu-text">Buttons</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-cards.html" class="menu-link">
                      <span class="menu-text">Cards</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-carousel.html" class="menu-link">
                      <span class="menu-text">Carousel</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-dropdowns.html" class="menu-link">
                      <span class="menu-text">Dropdowns</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-video.html" class="menu-link">
                      <span class="menu-text">Embed Video</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-general.html" class="menu-link">
                      <span class="menu-text">General UI</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-grid.html" class="menu-link">
                      <span class="menu-text">Grid</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-images.html" class="menu-link">
                      <span class="menu-text">Images</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-list-group.html" class="menu-link">
                      <span class="menu-text">List Group</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-modals.html" class="menu-link">
                      <span class="menu-text">Modals</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-offcanvas.html" class="menu-link">
                      <span class="menu-text">Offcanvas</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-placeholders.html" class="menu-link">
                      <span class="menu-text">Placeholders</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-progress.html" class="menu-link">
                      <span class="menu-text">Progress</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-spinners.html" class="menu-link">
                      <span class="menu-text">Spinners</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-tabs-accordions.html" class="menu-link">
                      <span class="menu-text">Tabs & Accordions</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-tooltips-popovers.html" class="menu-link">
                      <span class="menu-text">Tooltips & Popovers</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-typography.html" class="menu-link">
                      <span class="menu-text">Typography</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuExtendedui"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"
                  ><i class="bx bx-briefcase-alt-2"></i
                ></span>
                <span class="menu-text"> Components </span>
                <span class="badge bg-info ms-auto">Hot</span>
              </a>
              <div class="collapse" id="menuExtendedui">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="components-range-slider.html" class="menu-link">
                      <span class="menu-text">Range Slider</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="components-sweet-alert.html" class="menu-link">
                      <span class="menu-text">Sweet Alert</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="components-loading-buttons.html" class="menu-link">
                      <span class="menu-text">Loading Buttons</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuIcons"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-aperture"></i></span>
                <span class="menu-text"> Icons </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuIcons">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="icons-feather.html" class="menu-link">
                      <span class="menu-text">Feather Icons</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="icons-mdi.html" class="menu-link">
                      <span class="menu-text">Material Design Icons</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="icons-dripicons.html" class="menu-link">
                      <span class="menu-text">Dripicons</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuForms"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bxs-eraser"></i></span>
                <span class="menu-text"> Forms </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuForms">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="forms-elements.html" class="menu-link">
                      <span class="menu-text">General Elements</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="forms-advanced.html" class="menu-link">
                      <span class="menu-text">Advanced</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="forms-validation.html" class="menu-link">
                      <span class="menu-text">Validation</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="forms-quilljs.html" class="menu-link">
                      <span class="menu-text">Editor</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="forms-file-uploads.html" class="menu-link">
                      <span class="menu-text">File Uploads</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuTables"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-table"></i></span>
                <span class="menu-text"> Tables </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuTables">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="tables-basic.html" class="menu-link">
                      <span class="menu-text">Basic Tables</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="tables-datatables.html" class="menu-link">
                      <span class="menu-text">Data Tables</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuCharts"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"
                  ><i class="bx bx-doughnut-chart"></i
                ></span>
                <span class="menu-text"> Charts </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuCharts">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="charts-apex.html" class="menu-link">
                      <span class="menu-text">Apex Charts</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="charts-morris.html" class="menu-link">
                      <span class="menu-text">Morris Charts</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="charts-chartjs.html" class="menu-link">
                      <span class="menu-text">Chartjs Charts</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuMaps"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-map-alt"></i></span>
                <span class="menu-text"> Maps </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuMaps">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="maps-google.html" class="menu-link">
                      <span class="menu-text">Google Maps</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="maps-vector.html" class="menu-link">
                      <span class="menu-text">Vector Maps</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuMultilevel"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-share-alt"></i></span>
                <span class="menu-text"> Multi Level </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuMultilevel">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a
                      href="#menuMultilevel2"
                      data-bs-toggle="collapse"
                      class="menu-link waves-effect waves-light"
                    >
                      <span class="menu-text"> Second Level </span>
                      <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="menuMultilevel2">
                      <ul class="sub-menu">
                        <li class="menu-item">
                          <a href="javascript: void(0);" class="menu-link">
                            <span class="menu-text">Item 1</span>
                          </a>
                        </li>
                        <li class="menu-item">
                          <a href="javascript: void(0);" class="menu-link">
                            <span class="menu-text">Item 2</span>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </li>

                  <li class="menu-item">
                    <a
                      href="#menuMultilevel3"
                      data-bs-toggle="collapse"
                      class="menu-link waves-effect waves-light"
                    >
                      <span class="menu-text">Third Level</span>
                      <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="menuMultilevel3">
                      <ul class="sub-menu">
                        <li class="menu-item">
                          <a href="javascript: void(0);" class="menu-link">
                            <span class="menu-text">Item 1</span>
                          </a>
                        </li>
                        <li class="menu-item">
                          <a
                            href="#menuMultilevel4"
                            data-bs-toggle="collapse"
                            class="menu-link waves-effect waves-light"
                          >
                            <span class="menu-text">Item 2</span>
                            <span class="menu-arrow"></span>
                          </a>
                          <div class="collapse" id="menuMultilevel4">
                            <ul class="sub-menu">
                              <li class="menu-item">
                                <a
                                  href="javascript: void(0);"
                                  class="menu-link"
                                >
                                  <span class="menu-text">Item 1</span>
                                </a>
                              </li>
                              <li class="menu-item">
                                <a
                                  href="javascript: void(0);"
                                  class="menu-link"
                                >
                                  <span class="menu-text">Item 2</span>
                                </a>
                              </li>
                            </ul>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <!-- Start Page Content here -->
      <div class="page-content">
        <!-- ========== Topbar Start ========== -->
        <div class="navbar-custom">
          <div class="topbar">
            <div class="topbar-menu d-flex align-items-center gap-lg-2 gap-1">
              <!-- Brand Logo -->
              <div class="logo-box">
                <!-- Brand Logo Light -->
                <a href="index.html" class="logo-light">
                  <img
                    src="../src/assets/images/logo-light.png"
                    alt="logo"
                    class="logo-lg"
                    height="22"
                  />
                  <img
                    src="../src/assets/images/logo-sm.png"
                    alt="small logo"
                    class="logo-sm"
                    height="22"
                  />
                </a>

                <!-- Brand Logo Dark -->
                <a href="index.html" class="logo-dark">
                  <img
                    src="../src/assets/images/logo-dark.png"
                    alt="dark logo"
                    class="logo-lg"
                    height="22"
                  />
                  <img
                    src="../src/assets/images/logo-sm.png"
                    alt="small logo"
                    class="logo-sm"
                    height="22"
                  />
                </a>
              </div>

              <!-- Sidebar Menu Toggle Button -->
              <button class="button-toggle-menu">
                <i class="mdi mdi-menu"></i>
              </button>
            </div>

            <ul class="topbar-menu d-flex align-items-center gap-4">
              <li class="d-none d-md-inline-block">
                <a class="nav-link" href="" data-bs-toggle="fullscreen">
                  <i class="mdi mdi-fullscreen font-size-24"></i>
                </a>
              </li>

              <li class="dropdown">
                <a
                  class="nav-link dropdown-toggle waves-effect waves-light arrow-none"
                  data-bs-toggle="dropdown"
                  href="#"
                  role="button"
                  aria-haspopup="false"
                  aria-expanded="false"
                >
                  <i class="mdi mdi-magnify font-size-24"></i>
                </a>
                <div
                  class="dropdown-menu dropdown-menu-animated dropdown-menu-end dropdown-lg p-0"
                >
                  <form class="p-3">
                    <input
                      type="search"
                      class="form-control"
                      placeholder="Search ..."
                      aria-label="Recipient's username"
                    />
                  </form>
                </div>
              </li>

              <li class="dropdown d-none d-md-inline-block">
                <a
                  class="nav-link dropdown-toggle waves-effect waves-light arrow-none"
                  data-bs-toggle="dropdown"
                  href="#"
                  role="button"
                  aria-haspopup="false"
                  aria-expanded="false"
                >
                  <img
                    src="../src/assets/images/flags/us.jpg"
                    alt="user-image"
                    class="me-0 me-sm-1"
                    height="18"
                  />
                </a>
                <div
                  class="dropdown-menu dropdown-menu-end dropdown-menu-animated"
                >
                  <!-- item-->
                  <a href="javascript:void(0);" class="dropdown-item">
                    <img
                      src="../src/assets/images/flags/germany.jpg"
                      alt="user-image"
                      class="me-1"
                      height="12"
                    />
                    <span class="align-middle">German</span>
                  </a>

                  <!-- item-->
                  <a href="javascript:void(0);" class="dropdown-item">
                    <img
                      src="../src/assets/images/flags/italy.jpg"
                      alt="user-image"
                      class="me-1"
                      height="12"
                    />
                    <span class="align-middle">Italian</span>
                  </a>

                  <!-- item-->
                  <a href="javascript:void(0);" class="dropdown-item">
                    <img
                      src="../src/assets/images/flags/spain.jpg"
                      alt="user-image"
                      class="me-1"
                      height="12"
                    />
                    <span class="align-middle">Spanish</span>
                  </a>

                  <!-- item-->
                  <a href="javascript:void(0);" class="dropdown-item">
                    <img
                      src="../src/assets/images/flags/russia.jpg"
                      alt="user-image"
                      class="me-1"
                      height="12"
                    />
                    <span class="align-middle">Russian</span>
                  </a>
                </div>
              </li>

              <li class="dropdown notification-list">
                <a
                  class="nav-link dropdown-toggle waves-effect waves-light arrow-none"
                  data-bs-toggle="dropdown"
                  href="#"
                  role="button"
                  aria-haspopup="false"
                  aria-expanded="false"
                >
                  <i class="mdi mdi-bell font-size-24"></i>
                  <span class="badge bg-danger rounded-circle noti-icon-badge"
                    >9</span
                  >
                </a>
                <div
                  class="dropdown-menu dropdown-menu-end dropdown-menu-animated dropdown-lg py-0"
                >
                  <div
                    class="p-2 border-top-0 border-start-0 border-end-0 border-dashed border"
                  >
                    <div class="row align-items-center">
                      <div class="col">
                        <h6 class="m-0 font-size-16 fw-semibold">
                          Notification
                        </h6>
                      </div>
                      <div class="col-auto">
                        <a
                          href="javascript: void(0);"
                          class="text-dark text-decoration-underline"
                        >
                          <small>Clear All</small>
                        </a>
                      </div>
                    </div>
                  </div>

                  <div class="px-1" style="max-height: 300px" data-simplebar>
                    <h5 class="text-muted font-size-13 fw-normal mt-2">
                      Today
                    </h5>
                    <!-- item-->

                    <a
                      href="javascript:void(0);"
                      class="dropdown-item p-0 notify-item card unread-noti shadow-none mb-1"
                    >
                      <div class="card-body">
                        <span class="float-end noti-close-btn text-muted"
                          ><i class="mdi mdi-close"></i
                        ></span>
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="notify-icon bg-primary">
                              <i class="mdi mdi-comment-account-outline"></i>
                            </div>
                          </div>
                          <div class="flex-grow-1 text-truncate ms-2">
                            <h5
                              class="noti-item-title fw-semibold font-size-14"
                            >
                              Datacorp
                              <small class="fw-normal text-muted ms-1"
                                >1 min ago</small
                              >
                            </h5>
                            <small class="noti-item-subtitle text-muted"
                              >Caleb Flakelar commented on Admin</small
                            >
                          </div>
                        </div>
                      </div>
                    </a>

                    <!-- item-->
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item p-0 notify-item card read-noti shadow-none mb-1"
                    >
                      <div class="card-body">
                        <span class="float-end noti-close-btn text-muted"
                          ><i class="mdi mdi-close"></i
                        ></span>
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="notify-icon bg-info">
                              <i class="mdi mdi-account-plus"></i>
                            </div>
                          </div>
                          <div class="flex-grow-1 text-truncate ms-2">
                            <h5
                              class="noti-item-title fw-semibold font-size-14"
                            >
                              Admin
                              <small class="fw-normal text-muted ms-1"
                                >1 hours ago</small
                              >
                            </h5>
                            <small class="noti-item-subtitle text-muted"
                              >New user registered</small
                            >
                          </div>
                        </div>
                      </div>
                    </a>

                    <h5 class="text-muted font-size-13 fw-normal mt-0">
                      Yesterday
                    </h5>

                    <!-- item-->
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item p-0 notify-item card read-noti shadow-none mb-1"
                    >
                      <div class="card-body">
                        <span class="float-end noti-close-btn text-muted"
                          ><i class="mdi mdi-close"></i
                        ></span>
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="notify-icon">
                              <img
                                src="../src/assets/images/users/avatar-2.jpg"
                                class="img-fluid rounded-circle"
                                alt=""
                              />
                            </div>
                          </div>
                          <div class="flex-grow-1 text-truncate ms-2">
                            <h5
                              class="noti-item-title fw-semibold font-size-14"
                            >
                              Cristina Pride
                              <small class="fw-normal text-muted ms-1"
                                >1 day ago</small
                              >
                            </h5>
                            <small class="noti-item-subtitle text-muted"
                              >Hi, How are you? What about our next
                              meeting</small
                            >
                          </div>
                        </div>
                      </div>
                    </a>

                    <h5 class="text-muted font-size-13 fw-normal mt-0">
                      30 Dec 2021
                    </h5>

                    <!-- item-->
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item p-0 notify-item card read-noti shadow-none mb-1"
                    >
                      <div class="card-body">
                        <span class="float-end noti-close-btn text-muted"
                          ><i class="mdi mdi-close"></i
                        ></span>
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="notify-icon bg-primary">
                              <i class="mdi mdi-comment-account-outline"></i>
                            </div>
                          </div>
                          <div class="flex-grow-1 text-truncate ms-2">
                            <h5
                              class="noti-item-title fw-semibold font-size-14"
                            >
                              Datacorp
                            </h5>
                            <small class="noti-item-subtitle text-muted"
                              >Caleb Flakelar commented on Admin</small
                            >
                          </div>
                        </div>
                      </div>
                    </a>

                    <!-- item-->
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item p-0 notify-item card read-noti shadow-none mb-1"
                    >
                      <div class="card-body">
                        <span class="float-end noti-close-btn text-muted"
                          ><i class="mdi mdi-close"></i
                        ></span>
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="notify-icon">
                              <img
                                src="../src/assets/images/users/avatar-4.jpg"
                                class="img-fluid rounded-circle"
                                alt=""
                              />
                            </div>
                          </div>
                          <div class="flex-grow-1 text-truncate ms-2">
                            <h5
                              class="noti-item-title fw-semibold font-size-14"
                            >
                              Karen Robinson
                            </h5>
                            <small class="noti-item-subtitle text-muted"
                              >Wow ! this admin looks good and awesome
                              design</small
                            >
                          </div>
                        </div>
                      </div>
                    </a>

                    <div class="text-center">
                      <i
                        class="mdi mdi-dots-circle mdi-spin text-muted h3 mt-0"
                      ></i>
                    </div>
                  </div>

                  <!-- All-->
                  <a
                    href="javascript:void(0);"
                    class="dropdown-item text-center text-primary notify-item border-top border-light py-2"
                  >
                    View All
                  </a>
                </div>
              </li>

              <li class="nav-link" id="theme-mode">
                <i class="bx bx-moon font-size-24"></i>
              </li>

              <li class="dropdown">
                <a
                  class="nav-link dropdown-toggle nav-user me-0 waves-effect waves-light"
                  data-bs-toggle="dropdown"
                  href="#"
                  role="button"
                  aria-haspopup="false"
                  aria-expanded="false"
                >
                  <img
                    src="../src/assets/images/users/avatar-4.jpg"
                    alt="user-image"
                    class="rounded-circle"
                  />
                  <span class="ms-1 d-none d-md-inline-block">
                    Jamie D. <i class="mdi mdi-chevron-down"></i>
                  </span>
                </a>
                <div class="dropdown-menu dropdown-menu-end profile-dropdown">
                  <!-- item-->
                  <div class="dropdown-header noti-title">
                    <h6 class="text-overflow m-0">Welcome !</h6>
                  </div>

                  <!-- item-->
                  <a
                    href="javascript:void(0);"
                    class="dropdown-item notify-item"
                  >
                    <i class="fe-user"></i>
                    <span>My Account</span>
                  </a>

                  <!-- item-->
                  <a
                    href="javascript:void(0);"
                    class="dropdown-item notify-item"
                  >
                    <i class="fe-settings"></i>
                    <span>Settings</span>
                  </a>

                  <!-- item-->
                  <a
                    href="pages-lock-screen.html"
                    class="dropdown-item notify-item"
                  >
                    <i class="fe-lock"></i>
                    <span>Lock Screen</span>
                  </a>

                  <div class="dropdown-divider"></div>

                  <!-- item-->
                  <a href="pages-login.html" class="dropdown-item notify-item">
                    <i class="fe-log-out"></i>
                    <span>Logout</span>
                  </a>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- ========== Topbar End ========== -->

        <div class="px-3">
          <!-- Start Content-->
          <div class="container-fluid">
            <!-- start page title -->
            <div class="py-3 py-lg-4">
              <div class="row">
                <div class="col-lg-6">
                  <h4 class="page-title mb-0">UI Elements</h4>
                </div>
                <div class="col-lg-6">
                  <div class="d-none d-lg-block">
                    <ol class="breadcrumb m-0 float-end">
                      <li class="breadcrumb-item">
                        <a href="javascript: void(0);">Base UI</a>
                      </li>
                      <li class="breadcrumb-item active">UI Elements</li>
                    </ol>
                  </div>
                </div>
              </div>
            </div>
            <!-- end page title -->

            <!-- Start Buttons -->
            <div class="row">
              <div class="col-lg-12">
                <div class="card" id="buttons">
                  <div class="card-body">
                    <h4 class="card-title mb-4">Buttons</h4>

                    <div>
                      <h5 class="font-size-14">Basic</h5>
                      <p class="card-title-desc">
                        Bootstrap includes six predefined button styles, each
                        serving its own semantic purpose..
                      </p>

                      <div class="d-flex flex-wrap gap-2">
                        <button
                          type="button"
                          class="btn btn-primary waves-effect waves-light"
                        >
                          Primary
                        </button>
                        <button
                          type="button"
                          class="btn btn-light waves-effect"
                        >
                          Light
                        </button>
                        <button
                          type="button"
                          class="btn btn-success waves-effect waves-light"
                        >
                          Success
                        </button>
                        <button
                          type="button"
                          class="btn btn-info waves-effect waves-light"
                        >
                          Info
                        </button>
                        <button
                          type="button"
                          class="btn btn-warning waves-effect waves-light"
                        >
                          Warning
                        </button>
                        <button
                          type="button"
                          class="btn btn-danger waves-effect waves-light"
                        >
                          Danger
                        </button>
                        <button
                          type="button"
                          class="btn btn-dark waves-effect waves-light"
                        >
                          Dark
                        </button>
                        <button type="button" class="btn btn-link waves-effect">
                          Link
                        </button>
                        <button
                          type="button"
                          class="btn btn-secondary waves-effect waves-light"
                        >
                          Secondary
                        </button>
                      </div>
                    </div>

                    <div class="row mt-3">
                      <div class="col-lg-6">
                        <div class="mt-4">
                          <h5 class="font-size-14">Outline</h5>
                          <p class="card-title-desc">
                            Replace the default modifier classes with the
                            <code class="highlighter-rouge"
                              >.btn-outline-*</code
                            >
                            ones to remove all background images and colors on
                            any button.
                          </p>

                          <div class="d-flex flex-wrap gap-2">
                            <button
                              type="button"
                              class="btn btn-outline-primary waves-effect waves-light"
                            >
                              Primary
                            </button>
                            <button
                              type="button"
                              class="btn btn-outline-secondary waves-effect"
                            >
                              Secondary
                            </button>
                            <button
                              type="button"
                              class="btn btn-outline-success waves-effect waves-light"
                            >
                              Success
                            </button>
                            <button
                              type="button"
                              class="btn btn-outline-info waves-effect waves-light"
                            >
                              Info
                            </button>
                            <button
                              type="button"
                              class="btn btn-outline-warning waves-effect waves-light"
                            >
                              Warning
                            </button>
                            <button
                              type="button"
                              class="btn btn-outline-danger waves-effect waves-light"
                            >
                              Danger
                            </button>
                            <button
                              type="button"
                              class="btn btn-outline-dark waves-effect waves-light"
                            >
                              Dark
                            </button>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-lg-6">
                        <div class="mt-4">
                          <h5 class="font-size-14">Rounded</h5>
                          <p class="card-title-desc">
                            Use class <code>.btn-rounded</code> for button
                            round.
                          </p>

                          <div class="d-flex flex-wrap gap-2">
                            <button
                              type="button"
                              class="btn btn-primary btn-rounded waves-effect waves-light"
                            >
                              Primary
                            </button>
                            <button
                              type="button"
                              class="btn btn-secondary btn-rounded waves-effect waves-light"
                            >
                              Secondary
                            </button>
                            <button
                              type="button"
                              class="btn btn-success btn-rounded waves-effect waves-light"
                            >
                              Success
                            </button>
                            <button
                              type="button"
                              class="btn btn-info btn-rounded waves-effect waves-light"
                            >
                              Info
                            </button>
                            <button
                              type="button"
                              class="btn btn-warning btn-rounded waves-effect waves-light"
                            >
                              Warning
                            </button>
                            <button
                              type="button"
                              class="btn btn-danger btn-rounded waves-effect waves-light"
                            >
                              Danger
                            </button>
                            <button
                              type="button"
                              class="btn btn-dark btn-rounded waves-effect waves-light"
                            >
                              Dark
                            </button>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->

                    <div class="row mt-3">
                      <div class="col-lg-6">
                        <div class="mt-4">
                          <h5 class="font-size-14">Sizes</h5>
                          <p class="card-title-desc">
                            Add <code>.btn-lg</code> or <code>.btn-sm</code> for
                            additional sizes.
                          </p>

                          <div
                            class="d-flex flex-wrap gap-3 align-items-center"
                          >
                            <button
                              type="button"
                              class="btn btn-primary btn-lg waves-effect waves-light"
                            >
                              Large button
                            </button>
                            <button
                              type="button"
                              class="btn btn-warning btn-sm waves-effect waves-light"
                            >
                              Small button
                            </button>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-lg-6">
                        <div class="mt-4">
                          <h5 class="font-size-14">Width</h5>
                          <p class="card-title-desc">
                            Add <code>.w-xs</code>, <code>.w-sm</code>,
                            <code>.w-md</code> and <code> .w-lg</code> class for
                            additional buttons width.
                          </p>

                          <div class="d-flex flex-wrap gap-2">
                            <button
                              type="button"
                              class="btn btn-primary w-xs waves-effect waves-light"
                            >
                              Xs
                            </button>
                            <button
                              type="button"
                              class="btn btn-danger w-sm waves-effect waves-light"
                            >
                              Small
                            </button>
                            <button
                              type="button"
                              class="btn btn-warning w-md waves-effect waves-light"
                            >
                              Medium
                            </button>
                            <button
                              type="button"
                              class="btn btn-success w-lg waves-effect waves-light"
                            >
                              Large
                            </button>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->

                    <div class="row mt-3">
                      <div class="col-lg-6">
                        <div class="mt-4">
                          <h5 class="font-size-14">Tags</h5>
                          <p class="card-title-desc">
                            The <code>.btn</code> classes are designed to be
                            used with the <code>&lt;button&gt;</code> element.
                            However, you can also use these classes on
                            <code>&lt;a&gt;</code> or
                            <code>&lt;input&gt;</code> elements (though some
                            browsers may apply a slightly different rendering).
                          </p>

                          <div class="d-flex flex-wrap gap-2">
                            <a
                              class="btn btn-primary waves-effect waves-light"
                              href="javascript: void(0);"
                              role="button"
                              >Link</a
                            >
                            <button
                              class="btn btn-success waves-effect waves-light"
                              type="submit"
                            >
                              Button
                            </button>
                            <input
                              class="btn btn-info"
                              type="button"
                              value="Input"
                            />
                            <input
                              class="btn btn-danger"
                              type="submit"
                              value="Submit"
                            />
                            <input
                              class="btn btn-warning"
                              type="reset"
                              value="Reset"
                            />
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->
                  </div>
                  <!-- End card-body -->
                </div>
                <!-- End card -->
              </div>
              <!-- End col -->
            </div>
            <!-- End row -->
            <!-- End Buttons -->

            <!-- Start Badges -->
            <div class="row">
              <div class="col-lg-12">
                <div class="card" id="badges">
                  <div class="card-body">
                    <h4 class="card-title mb-4">Badges</h4>

                    <div class="row">
                      <div class="col-lg-6">
                        <div>
                          <h5 class="font-size-14">Basic</h5>
                          <p class="card-title-desc">
                            Add any of the below mentioned modifier classes to
                            change the appearance of a badge.
                          </p>

                          <div class="d-flex flex-wrap gap-2">
                            <span class="badge text-bg-primary">Primary</span>
                            <span class="badge text-bg-success">Success</span>
                            <span class="badge text-bg-info">Info</span>
                            <span class="badge text-bg-warning">Warning</span>
                            <span class="badge text-bg-danger">Danger</span>
                            <span class="badge text-bg-dark">Dark</span>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-lg-6">
                        <div class="mt-5 mt-lg-0">
                          <h5 class="font-size-14">Pill</h5>
                          <p class="card-title-desc">
                            Use the <code>.rounded-pill</code> modifier class to
                            make badges more rounded.
                          </p>

                          <div class="d-flex flex-wrap gap-2">
                            <span class="badge rounded-pill text-bg-primary"
                              >Primary</span
                            >
                            <span class="badge rounded-pill text-bg-success"
                              >Success</span
                            >
                            <span class="badge rounded-pill text-bg-info"
                              >Info</span
                            >
                            <span class="badge rounded-pill text-bg-warning"
                              >Warning</span
                            >
                            <span class="badge rounded-pill text-bg-danger"
                              >Danger</span
                            >
                            <span class="badge rounded-pill text-bg-dark"
                              >Dark</span
                            >
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->

                    <div class="row">
                      <div class="col-lg-6">
                        <div class="mt-5">
                          <h5 class="font-size-14">Lighten</h5>
                          <p class="card-title-desc">
                            Use <code>.bg-soft-*</code> class for a badge
                            lighten.
                          </p>

                          <div class="d-flex flex-wrap gap-2">
                            <span class="badge badge-soft-primary"
                              >Primary</span
                            >
                            <span class="badge badge-soft-success"
                              >Success</span
                            >
                            <span class="badge badge-soft-info">Info</span>
                            <span class="badge badge-soft-warning"
                              >Warning</span
                            >
                            <span class="badge badge-soft-danger">Danger</span>
                            <span class="badge badge-soft-dark">Dark</span>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-lg-6">
                        <div class="mt-5">
                          <h5 class="font-size-14">Soft Pill</h5>
                          <p class="card-title-desc">
                            Use <code>.bg-soft-*</code> class for a pill badge.
                          </p>

                          <div class="d-flex flex-wrap gap-2">
                            <span class="badge rounded-pill badge-soft-primary"
                              >Primary</span
                            >
                            <span class="badge rounded-pill badge-soft-success"
                              >Success</span
                            >
                            <span class="badge rounded-pill badge-soft-info"
                              >Info</span
                            >
                            <span class="badge rounded-pill badge-soft-warning"
                              >Warning</span
                            >
                            <span class="badge rounded-pill badge-soft-danger"
                              >Danger</span
                            >
                            <span class="badge rounded-pill badge-soft-dark"
                              >Dark</span
                            >
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->

                    <div class="row">
                      <div class="col-lg-6">
                        <div class="mt-5">
                          <h5 class="font-size-14">Badges in Buttons</h5>
                          <p class="card-title-desc">
                            Badges can be used as part of links or buttons to
                            provide a counter.
                          </p>

                          <div class="d-flex flex-wrap gap-2">
                            <button type="button" class="btn btn-primary">
                              Notifications
                              <span class="badge bg-success ms-1">4</span>
                            </button>
                            <button type="button" class="btn btn-success">
                              Messages
                              <span class="badge bg-danger ms-1">2</span>
                            </button>
                            <button
                              type="button"
                              class="btn btn-outline-secondary"
                            >
                              Draft <span class="badge bg-success ms-1">2</span>
                            </button>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-lg-6">
                        <div class="mt-5">
                          <h5 class="font-size-14">Badges Position Examples</h5>
                          <p class="card-title-desc">
                            Example of Badges Position
                          </p>

                          <div class="d-flex flex-wrap gap-3">
                            <button
                              type="button"
                              class="btn btn-primary position-relative"
                            >
                              Mails
                              <span
                                class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-success"
                                >+99
                                <span class="visually-hidden"
                                  >unread messages</span
                                ></span
                              >
                            </button>

                            <button
                              type="button"
                              class="btn btn-light position-relative"
                            >
                              Alerts
                              <span
                                class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-1"
                                ><span class="visually-hidden"
                                  >unread messages</span
                                ></span
                              >
                            </button>

                            <button
                              type="button"
                              class="btn btn-primary position-relative p-0 avatar-xs rounded"
                            >
                              <span class="avatar-title bg-transparent">
                                <i class="bx bxs-envelope"></i>
                              </span>
                              <span
                                class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-1"
                                ><span class="visually-hidden"
                                  >unread messages</span
                                ></span
                              >
                            </button>

                            <button
                              type="button"
                              class="btn btn-light position-relative p-0 avatar-xs rounded-circle"
                            >
                              <span
                                class="avatar-title bg-transparent text-reset"
                              >
                                <i class="bx bxs-bell"></i>
                              </span>
                            </button>

                            <button
                              type="button"
                              class="btn btn-light position-relative p-0 avatar-xs rounded-circle"
                            >
                              <span
                                class="avatar-title bg-transparent text-reset"
                              >
                                <i class="bx bx-menu"></i>
                              </span>
                              <span
                                class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-success p-1"
                                ><span class="visually-hidden"
                                  >unread messages</span
                                ></span
                              >
                            </button>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->
                  </div>
                  <!-- End card-body -->
                </div>
                <!-- End card -->
              </div>
              <!-- End col -->
            </div>
            <!-- End row -->
            <!-- End Badges -->

            <!-- Start Dropdown -->
            <div class="row">
              <div class="col-lg-12">
                <div class="card" id="dropdowns">
                  <div class="card-body">
                    <h4 class="card-title mb-4">Dropdowns</h4>

                    <div class="row">
                      <div class="col-lg-6">
                        <div>
                          <h5 class="font-size-14">Basic</h5>
                          <p class="card-title-desc">
                            Any single
                            <code class="highlighter-rouge">.btn</code> can be
                            turned into a dropdown toggle with some markup
                            changes. Here’s how you can put them to work with
                            either
                            <code class="highlighter-rouge"
                              >&lt;button&gt;</code
                            >
                            elements:
                          </p>

                          <div class="d-flex flex-wrap gap-3">
                            <div class="dropdown">
                              <button
                                class="btn btn-secondary dropdown-toggle"
                                type="button"
                                id="dropdownMenuButton"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                Dropdown Button
                                <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <div
                                class="dropdown-menu"
                                aria-labelledby="dropdownMenuButton"
                              >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Another action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Something else here</a
                                >
                              </div>
                            </div>
                            <div class="dropdown">
                              <a
                                href="javascript: void(0);"
                                class="btn btn-secondary dropdown-toggle"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                Dropdown link
                                <i class="mdi mdi-chevron-down"></i>
                              </a>

                              <div class="dropdown-menu">
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Another action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Something else here</a
                                >
                              </div>
                            </div>
                          </div>
                          <!-- End row -->
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-lg-6">
                        <div class="mt-4 mt-lg-0">
                          <h5 class="font-size-14">Variant</h5>
                          <p class="card-title-desc">
                            The best part is you can do this with any button
                            variant, too:
                          </p>

                          <div class="d-flex flex-wrap gap-2">
                            <div class="btn-group">
                              <button
                                type="button"
                                class="btn btn-primary dropdown-toggle"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                Primary <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <div class="dropdown-menu">
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Another action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Something else here</a
                                >
                                <div class="dropdown-divider"></div>
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Separated link</a
                                >
                              </div>
                            </div>
                            <!-- /btn-group -->

                            <div class="btn-group">
                              <button
                                type="button"
                                class="btn btn-secondary dropdown-toggle"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                Secondary <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <div class="dropdown-menu">
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Another action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Something else here</a
                                >
                                <div class="dropdown-divider"></div>
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Separated link</a
                                >
                              </div>
                            </div>
                            <!-- /btn-group -->

                            <div class="btn-group">
                              <button
                                type="button"
                                class="btn btn-success dropdown-toggle"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                Success <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <div class="dropdown-menu">
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Another action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Something else here</a
                                >
                                <div class="dropdown-divider"></div>
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Separated link</a
                                >
                              </div>
                            </div>
                            <!-- /btn-group -->

                            <div class="btn-group">
                              <button
                                type="button"
                                class="btn btn-info dropdown-toggle"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                Info <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <div class="dropdown-menu">
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Another action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Something else here</a
                                >
                                <div class="dropdown-divider"></div>
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Separated link</a
                                >
                              </div>
                            </div>
                            <!-- /btn-group -->

                            <div class="btn-group">
                              <button
                                type="button"
                                class="btn btn-warning dropdown-toggle"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                Warning <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <div class="dropdown-menu">
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Another action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Something else here</a
                                >
                                <div class="dropdown-divider"></div>
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Separated link</a
                                >
                              </div>
                            </div>
                            <!-- /btn-group -->

                            <div class="btn-group">
                              <button
                                type="button"
                                class="btn btn-danger dropdown-toggle"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                Danger <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <div class="dropdown-menu">
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Another action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Something else here</a
                                >
                                <div class="dropdown-divider"></div>
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Separated link</a
                                >
                              </div>
                            </div>
                            <!-- /btn-group -->
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->

                    <div class="row mt-3">
                      <div class="col-lg-6">
                        <div class="mt-4">
                          <h5 class="font-size-14">Split Button</h5>
                          <p class="card-title-desc">
                            The best part is you can do this with any button
                            variant, too:
                          </p>

                          <div class="d-flex flex-wrap gap-2">
                            <div class="btn-group">
                              <button type="button" class="btn btn-primary">
                                Primary
                              </button>
                              <button
                                type="button"
                                class="btn btn-primary dropdown-toggle dropdown-toggle-split"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <div class="dropdown-menu">
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Another action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Something else here</a
                                >
                                <div class="dropdown-divider"></div>
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Separated link</a
                                >
                              </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group">
                              <button type="button" class="btn btn-secondary">
                                Secondary
                              </button>
                              <button
                                type="button"
                                class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <div class="dropdown-menu">
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Another action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Something else here</a
                                >
                                <div class="dropdown-divider"></div>
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Separated link</a
                                >
                              </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group">
                              <button type="button" class="btn btn-success">
                                Success
                              </button>
                              <button
                                type="button"
                                class="btn btn-success dropdown-toggle dropdown-toggle-split"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <div class="dropdown-menu">
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Another action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Something else here</a
                                >
                                <div class="dropdown-divider"></div>
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Separated link</a
                                >
                              </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group">
                              <button type="button" class="btn btn-info">
                                Info
                              </button>
                              <button
                                type="button"
                                class="btn btn-info dropdown-toggle dropdown-toggle-split"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <div class="dropdown-menu">
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Another action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Something else here</a
                                >
                                <div class="dropdown-divider"></div>
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Separated link</a
                                >
                              </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group">
                              <button type="button" class="btn btn-warning">
                                Warning
                              </button>
                              <button
                                type="button"
                                class="btn btn-warning dropdown-toggle dropdown-toggle-split"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <div class="dropdown-menu">
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Another action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Something else here</a
                                >
                                <div class="dropdown-divider"></div>
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Separated link</a
                                >
                              </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group">
                              <button type="button" class="btn btn-danger">
                                Danger
                              </button>
                              <button
                                type="button"
                                class="btn btn-danger dropdown-toggle dropdown-toggle-split"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <div class="dropdown-menu">
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Another action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Something else here</a
                                >
                                <div class="dropdown-divider"></div>
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Separated link</a
                                >
                              </div>
                            </div>
                            <!-- /btn-group -->
                          </div>
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-lg-6">
                        <div class="mt-4">
                          <h5 class="font-size-14">Sizing</h5>
                          <p class="card-title-desc">
                            Button dropdowns work with buttons of all sizes,
                            including default and split dropdown buttons.
                          </p>

                          <div
                            class="d-flex flex-wrap gap-2 align-items-center"
                          >
                            <!-- Large button groups (default and split) -->
                            <div class="btn-group">
                              <button
                                class="btn btn-primary btn-lg dropdown-toggle"
                                type="button"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                Large Button
                                <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <div class="dropdown-menu">
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Another action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Something else here</a
                                >
                                <div class="dropdown-divider"></div>
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Separated link</a
                                >
                              </div>
                            </div>
                            <div class="btn-group">
                              <button
                                class="btn btn-secondary btn-lg"
                                type="button"
                              >
                                Large Button
                              </button>
                              <button
                                type="button"
                                class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <div class="dropdown-menu">
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Another action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Something else here</a
                                >
                                <div class="dropdown-divider"></div>
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Separated link</a
                                >
                              </div>
                            </div>

                            <!-- Small button groups (default and split) -->
                            <div class="btn-group">
                              <button
                                class="btn btn-info btn-sm dropdown-toggle"
                                type="button"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                Small Button
                                <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <div class="dropdown-menu">
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Another action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Something else here</a
                                >
                                <div class="dropdown-divider"></div>
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Separated link</a
                                >
                              </div>
                            </div>
                            <div class="btn-group">
                              <button
                                class="btn btn-secondary btn-sm"
                                type="button"
                              >
                                Small Button
                              </button>
                              <button
                                type="button"
                                class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <div class="dropdown-menu">
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Another action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Something else here</a
                                >
                                <div class="dropdown-divider"></div>
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Separated link</a
                                >
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->

                    <div class="row mt-3">
                      <div class="col-lg-6">
                        <div class="mt-4">
                          <h5 class="font-size-14">Dark Dropdowns</h5>
                          <p class="card-title-desc">
                            Opt into darker dropdowns to match a dark navbar or
                            custom style by adding
                            <code>.dropdown-menu-dark</code> onto an existing
                            <code>.dropdown-menu</code>. No changes are required
                            to the dropdown items.
                          </p>

                          <div class="dropdown">
                            <button
                              class="btn btn-secondary dropdown-toggle"
                              type="button"
                              id="dropdownMenuButton2"
                              data-bs-toggle="dropdown"
                              aria-expanded="false"
                            >
                              Dropdown button
                              <i class="mdi mdi-chevron-down"></i>
                            </button>
                            <ul
                              class="dropdown-menu dropdown-menu-dark"
                              aria-labelledby="dropdownMenuButton2"
                            >
                              <li>
                                <a class="dropdown-item active" href="#"
                                  >Action</a
                                >
                              </li>
                              <li>
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Another action</a
                                >
                              </li>
                              <li>
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Something else here</a
                                >
                              </li>
                              <li>
                                <hr class="dropdown-divider" />
                              </li>
                              <li>
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Separated link</a
                                >
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-lg-6">
                        <div class="mt-4">
                          <h5 class="font-size-14">Menu Alignment</h5>
                          <p class="card-title-desc">
                            Add
                            <code class="highlighter-rouge"
                              >.dropdown-menu-end</code
                            >
                            to a
                            <code class="highlighter-rouge"
                              >.dropdown-menu</code
                            >
                            to right align the dropdown menu.
                          </p>

                          <div class="btn-group">
                            <button
                              type="button"
                              class="btn btn-info dropdown-toggle"
                              data-bs-toggle="dropdown"
                              aria-expanded="false"
                            >
                              Right-aligned menu example
                              <i class="mdi mdi-chevron-down"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                              <li>
                                <button class="dropdown-item" type="button">
                                  Action
                                </button>
                              </li>
                              <li>
                                <button class="dropdown-item" type="button">
                                  Another action
                                </button>
                              </li>
                              <li>
                                <button class="dropdown-item" type="button">
                                  Something else here
                                </button>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->

                    <div class="row mt-3">
                      <div class="col-lg-6">
                        <div class="mt-4">
                          <h5 class="font-size-14">Menu Alignment Option</h5>
                          <p class="card-title-desc">
                            Taking most of the options shown above, here’s a
                            small kitchen sink demo of various dropdown
                            alignment options in one place.
                          </p>

                          <div
                            class="d-flex flex-wrap gap-2 align-items-center"
                          >
                            <div class="btn-group">
                              <button
                                class="btn btn-secondary dropdown-toggle"
                                type="button"
                                id="dropdownMenuButton"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                Dropdown <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <ul
                                class="dropdown-menu"
                                aria-labelledby="dropdownMenuButton"
                              >
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                              </ul>
                            </div>

                            <div class="btn-group">
                              <button
                                type="button"
                                class="btn btn-info dropdown-toggle"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                Right-aligned menu
                                <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <ul class="dropdown-menu dropdown-menu-end">
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                              </ul>
                            </div>

                            <div class="btn-group">
                              <button
                                type="button"
                                class="btn btn-secondary dropdown-toggle"
                                data-bs-toggle="dropdown"
                                data-bs-display="static"
                                aria-expanded="false"
                              >
                                Left-aligned, right-aligned lg
                                <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <ul class="dropdown-menu dropdown-menu-lg-end">
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                              </ul>
                            </div>

                            <div class="btn-group">
                              <button
                                type="button"
                                class="btn btn-info dropdown-toggle"
                                data-bs-toggle="dropdown"
                                data-bs-display="static"
                                aria-expanded="false"
                              >
                                Right-aligned, left-aligned lg
                                <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <ul
                                class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start"
                              >
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                              </ul>
                            </div>

                            <div class="btn-group dropstart">
                              <button
                                type="button"
                                class="btn btn-secondary dropdown-toggle"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                Dropstart <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <ul class="dropdown-menu">
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                              </ul>
                            </div>

                            <div class="btn-group dropend">
                              <button
                                type="button"
                                class="btn btn-info dropdown-toggle"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                Dropend <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <ul class="dropdown-menu">
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                              </ul>
                            </div>

                            <div class="btn-group dropup">
                              <button
                                type="button"
                                class="btn btn-secondary dropdown-toggle"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                Dropup <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <ul class="dropdown-menu">
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                              </ul>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-lg-6">
                        <div class="mt-4">
                          <h5 class="font-size-14">Auto Close Behavior</h5>
                          <p class="card-title-desc">
                            By default, the dropdown menu is closed when
                            clicking inside or outside the dropdown menu. You
                            can use the <code>autoClose</code> option to change
                            this behavior of the dropdown.
                          </p>
                          <div class="d-flex flex-wrap gap-3">
                            <div class="btn-group">
                              <button
                                class="btn btn-secondary dropdown-toggle"
                                type="button"
                                id="defaultDropdown"
                                data-bs-toggle="dropdown"
                                data-bs-auto-close="true"
                                aria-expanded="false"
                              >
                                Default dropdown
                                <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <ul
                                class="dropdown-menu"
                                aria-labelledby="defaultDropdown"
                              >
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                              </ul>
                            </div>

                            <div class="btn-group">
                              <button
                                class="btn btn-info dropdown-toggle"
                                type="button"
                                id="dropdownMenuClickableOutside"
                                data-bs-toggle="dropdown"
                                data-bs-auto-close="inside"
                                aria-expanded="false"
                              >
                                Clickable outside
                                <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <ul
                                class="dropdown-menu"
                                aria-labelledby="dropdownMenuClickableOutside"
                              >
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                              </ul>
                            </div>

                            <div class="btn-group">
                              <button
                                class="btn btn-secondary dropdown-toggle"
                                type="button"
                                id="dropdownMenuClickableInside"
                                data-bs-toggle="dropdown"
                                data-bs-auto-close="outside"
                                aria-expanded="false"
                              >
                                Clickable inside
                                <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <ul
                                class="dropdown-menu"
                                aria-labelledby="dropdownMenuClickableInside"
                              >
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                              </ul>
                            </div>

                            <div class="btn-group">
                              <button
                                class="btn btn-info dropdown-toggle"
                                type="button"
                                id="dropdownMenuClickable"
                                data-bs-toggle="dropdown"
                                data-bs-auto-close="false"
                                aria-expanded="false"
                              >
                                Manual close
                                <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <ul
                                class="dropdown-menu"
                                aria-labelledby="dropdownMenuClickable"
                              >
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Menu item</a
                                  >
                                </li>
                              </ul>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->

                    <div class="row mt-3">
                      <div class="col-lg-6">
                        <div class="mt-4">
                          <h5 class="font-size-14">Menu Content</h5>
                          <p class="card-title-desc">
                            Example of dropdown menu Headers, Text, Forms
                            content
                          </p>

                          <div class="d-flex flex-wrap gap-2">
                            <!-- Header -->
                            <div class="btn-group">
                              <button
                                type="button"
                                class="btn btn-primary dropdown-toggle"
                                data-bs-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="false"
                              >
                                Header <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <div class="dropdown-menu">
                                <div class="dropdown-header noti-title">
                                  <h5
                                    class="font-size-13 text-muted text-truncate mn-0"
                                  >
                                    Welcome Jessie!
                                  </h5>
                                </div>
                                <!-- item-->
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Another action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Something else here</a
                                >
                                <div class="dropdown-divider"></div>
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Separated link</a
                                >
                              </div>
                            </div>

                            <!-- Text -->
                            <div class="btn-group">
                              <button
                                type="button"
                                class="btn btn-success dropdown-toggle"
                                data-bs-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="false"
                              >
                                Text <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <div class="dropdown-menu dropdown-menu-md p-3">
                                <p>
                                  Some example text that's free-flowing within
                                  the dropdown menu.
                                </p>
                                <p class="mb-0">
                                  And this is more example text.
                                </p>
                              </div>
                            </div>

                            <!-- Forms -->
                            <div class="btn-group">
                              <button
                                type="button"
                                class="btn btn-light dropdown-toggle"
                                data-bs-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="false"
                              >
                                Forms <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <div class="dropdown-menu dropdown-menu-md p-4">
                                <form>
                                  <div class="mb-2">
                                    <label
                                      class="form-label"
                                      for="exampleDropdownFormEmail"
                                      >Email address</label
                                    >
                                    <input
                                      type="email"
                                      class="form-control"
                                      id="exampleDropdownFormEmail"
                                      placeholder="email@example.com"
                                    />
                                  </div>
                                  <div class="mb-2">
                                    <label
                                      class="form-label"
                                      for="exampleDropdownFormPassword"
                                      >Password</label
                                    >
                                    <input
                                      type="password"
                                      class="form-control"
                                      id="exampleDropdownFormPassword"
                                      placeholder="Password"
                                    />
                                  </div>
                                  <div class="mb-2">
                                    <div class="form-check custom-checkbox">
                                      <input
                                        type="checkbox"
                                        class="form-check-input"
                                        id="rememberdropdownCheck"
                                      />
                                      <label
                                        class="form-check-label"
                                        for="rememberdropdownCheck"
                                        >Remember me</label
                                      >
                                    </div>
                                  </div>
                                  <button type="submit" class="btn btn-primary">
                                    Sign in
                                  </button>
                                </form>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->

                    <div class="row mt-3">
                      <div class="col-lg-6">
                        <div class="mt-4">
                          <h5 class="font-size-14">Dropup Variation</h5>
                          <p class="card-title-desc">
                            Trigger dropdown menus above elements by adding
                            <code class="highlighter-rouge">.dropup</code> to
                            the parent element.
                          </p>

                          <div class="d-flex flex-wrap gap-3">
                            <!-- Default dropup button -->
                            <div class="btn-group dropup">
                              <button
                                type="button"
                                class="btn btn-secondary dropdown-toggle"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                Dropup <i class="mdi mdi-chevron-up"></i>
                              </button>
                              <div class="dropdown-menu">
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Another action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Something else here</a
                                >
                                <div class="dropdown-divider"></div>
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Separated link</a
                                >
                              </div>
                            </div>

                            <div class="btn-group">
                              <button
                                type="button"
                                class="btn btn-secondary dropdown-toggle"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                Menu is right-aligned
                                <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <div class="dropdown-menu dropdown-menu-end">
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Another action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Something else here</a
                                >
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-lg-6">
                        <div class="mt-4">
                          <h5 class="font-size-14">Dropright Variation</h5>
                          <p class="card-title-desc">
                            Trigger dropdown menus at the right of the elements
                            by adding <code>.dropend</code> to the parent
                            element.
                          </p>

                          <div class="d-flex flex-wrap gap-3">
                            <!-- Default dropright button -->
                            <div class="btn-group dropend">
                              <button
                                type="button"
                                class="btn btn-info waves-effect waves-light dropdown-toggle"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                Dropright <i class="mdi mdi-chevron-right"></i>
                              </button>
                              <div class="dropdown-menu">
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Another action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Something else here</a
                                >
                              </div>
                            </div>

                            <!-- Split dropright button -->
                            <div class="btn-group dropend">
                              <button
                                type="button"
                                class="btn btn-info waves-effect waves-light"
                              >
                                Split Dropend
                              </button>
                              <button
                                type="button"
                                class="btn btn-info waves-effect waves-light dropdown-toggle-split dropdown-toggle"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                <i class="mdi mdi-chevron-right"></i>
                              </button>
                              <div class="dropdown-menu">
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Another action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Something else here</a
                                >
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-lg-6">
                        <div class="mt-4">
                          <h5 class="font-size-14">Dropleft Variation</h5>
                          <p class="card-title-desc">
                            Trigger dropdown menus at the left of the elements
                            by adding <code>.dropend</code> to the parent
                            element.
                          </p>

                          <div class="d-flex flex-wrap gap-3">
                            <!-- Default dropright button -->
                            <div class="btn-group dropstart">
                              <button
                                type="button"
                                class="btn btn-info waves-effect waves-light dropdown-toggle"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                              >
                                <i class="mdi mdi-chevron-left"></i> Dropleft
                              </button>
                              <div class="dropdown-menu">
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Another action</a
                                >
                                <a
                                  class="dropdown-item"
                                  href="javascript: void(0);"
                                  >Something else here</a
                                >
                              </div>
                            </div>

                            <!-- Split dropright button -->
                            <div class="btn-group">
                              <div class="btn-group dropstart">
                                <button
                                  type="button"
                                  class="btn btn-info waves-effect waves-light dropdown-toggle-split dropdown-toggle"
                                  data-bs-toggle="dropdown"
                                  aria-expanded="false"
                                >
                                  <i class="mdi mdi-chevron-left"></i>
                                </button>
                                <div class="dropdown-menu">
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Action</a
                                  >
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Another action</a
                                  >
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Something else here</a
                                  >
                                </div>
                              </div>

                              <button
                                type="button"
                                class="btn btn-info waves-effect waves-light"
                              >
                                Split Dropstart
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->
                  </div>
                  <!-- End card-body -->
                </div>
                <!-- End card -->
              </div>
              <!-- End col -->
            </div>
            <!-- End row -->
            <!-- End Dropdowns -->

            <!-- Start Images -->
            <div class="row">
              <div class="col-lg-12">
                <div class="card" id="images">
                  <div class="card-body">
                    <h4 class="card-title mb-4">Images</h4>

                    <div class="row">
                      <div class="col-xl-6">
                        <div>
                          <h5 class="font-size-14">Rounded & Circle</h5>
                          <p class="card-title-desc">
                            Use classes <code>.rounded</code> and
                            <code>.rounded-circle</code>.
                          </p>

                          <div class="row">
                            <div class="col-md-6">
                              <img
                                class="rounded me-2"
                                alt="200x200"
                                width="200"
                                src="../src/assets/images/media/img-4.jpg"
                                data-holder-rendered="true"
                              />
                            </div>
                            <!-- End col -->

                            <div class="col-md-6">
                              <div class="mt-4 mt-md-0">
                                <img
                                  class="rounded-circle avatar-xl"
                                  alt="200x200"
                                  src="../src/assets/images/users/avatar-4.jpg"
                                  data-holder-rendered="true"
                                />
                              </div>
                            </div>
                            <!-- End col -->
                          </div>
                          <!-- End row -->
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-xl-6">
                        <div class="mt-4 mt-lg-0">
                          <h5 class="font-size-14">Thumbnails</h5>
                          <p class="card-title-desc">
                            In addition to our border-radius utilities, you can
                            use
                            <code class="highlighter-rouge"
                              >.img-thumbnail</code
                            >
                            to give an image a rounded 1px border appearance.
                          </p>

                          <div class="row">
                            <div class="col-md-6">
                              <img
                                class="img-thumbnail"
                                alt="200x200"
                                width="200"
                                src="../src/assets/images/media/img-3.jpg"
                                data-holder-rendered="true"
                              />
                            </div>
                            <div class="col-md-6">
                              <div class="mt-4 mt-md-0">
                                <img
                                  class="img-thumbnail rounded-circle avatar-xl"
                                  alt="200x200"
                                  src="../src/assets/images/users/avatar-3.jpg"
                                  data-holder-rendered="true"
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->

                    <div class="row mt-3">
                      <div class="col-lg-12">
                        <h5 class="font-size-14 mb-4">Sizes</h5>
                        <div class="row">
                          <div class="col-md-6">
                            <div class="row">
                              <div class="col-lg-4">
                                <div>
                                  <img
                                    src="../src/assets/images/users/avatar-3.jpg"
                                    alt="avatar-3"
                                    class="rounded avatar-sm"
                                  />
                                  <p class="mt-2 mb-lg-0">
                                    <code>.avatar-sm</code>
                                  </p>
                                </div>
                              </div>
                              <div class="col-lg-4">
                                <div>
                                  <img
                                    src="../src/assets/images/users/avatar-4.jpg"
                                    alt="avatar-4"
                                    class="rounded avatar-md"
                                  />
                                  <p class="mt-2 mb-lg-0">
                                    <code>.avatar-md</code>
                                  </p>
                                </div>
                              </div>
                              <div class="col-lg-4">
                                <div>
                                  <img
                                    src="../src/assets/images/users/avatar-5.jpg"
                                    alt="avatar-5"
                                    class="rounded avatar-lg"
                                  />
                                  <p class="mt-2 mb-md-0">
                                    <code>.avatar-lg</code>
                                  </p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="col-md-6">
                            <div class="row">
                              <div class="col-lg-4">
                                <div>
                                  <img
                                    src="../src/assets/images/users/avatar-3.jpg"
                                    alt="avatar-3"
                                    class="rounded-circle avatar-sm"
                                  />
                                  <p class="mt-2 mb-lg-0">
                                    <code>.avatar-sm</code>
                                  </p>
                                </div>
                              </div>
                              <!-- End col -->
                              <div class="col-lg-4">
                                <div>
                                  <img
                                    src="../src/assets/images/users/avatar-4.jpg"
                                    alt="avatar-4"
                                    class="rounded-circle avatar-md"
                                  />
                                  <p class="mt-2 mb-lg-0">
                                    <code>.avatar-md</code>
                                  </p>
                                </div>
                              </div>
                              <!-- End col -->
                              <div class="col-lg-4">
                                <div>
                                  <img
                                    src="../src/assets/images/users/avatar-5.jpg"
                                    alt="avatar-5"
                                    class="rounded-circle avatar-lg"
                                  />
                                  <p class="mt-2 mb-0">
                                    <code>.avatar-lg</code>
                                  </p>
                                </div>
                              </div>
                              <!-- End col -->
                            </div>
                            <!-- End row -->
                          </div>
                          <!-- End col -->
                        </div>
                        <!-- End row -->
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->

                    <div class="row mt-3">
                      <div class="col-lg-12">
                        <h5 class="font-size-14">Media Object</h5>
                        <p class="card-title-desc">
                          The images or other media can be aligned top, middle,
                          or bottom. The default is top aligned.
                        </p>

                        <div class="d-flex">
                          <div class="flex-shrink-0 me-3">
                            <img
                              class="rounded avatar-sm"
                              src="../src/assets/images/users/avatar-3.jpg"
                              alt="Generic placeholder image"
                            />
                          </div>
                          <div class="flex-grow-1">
                            <h6 class="font-size-15">Top-aligned media</h6>
                            <p class="text-muted mb-0">
                              Cras sit amet nibh libero, in gravida nulla. Nulla
                              vel metus scelerisque ante sollicitudin. Cras
                              purus odio, vestibulum in vulputate at, tempus
                              viverra turpis. Fusce condimentum nunc ac nisi
                              vulputate fringilla. Donec lacinia congue felis in
                              faucibus.
                            </p>
                          </div>
                        </div>

                        <div class="d-flex align-items-center my-4">
                          <div class="flex-shrink-0 me-3">
                            <img
                              class="rounded avatar-sm"
                              src="../src/assets/images/users/avatar-5.jpg"
                              alt="Generic placeholder image"
                            />
                          </div>
                          <div class="flex-grow-1">
                            <h6 class="font-size-15">Center-aligned media</h6>
                            <p class="text-muted mb-0">
                              Cras sit amet nibh libero, in gravida nulla. Nulla
                              vel metus scelerisque ante sollicitudin. Cras
                              purus odio, vestibulum in vulputate at, tempus
                              viverra turpis. Fusce condimentum nunc ac nisi
                              vulputate fringilla. Donec lacinia congue felis in
                              faucibus.
                            </p>
                          </div>
                        </div>

                        <div class="d-flex align-items-end">
                          <div class="flex-shrink-0 me-3">
                            <img
                              class="rounded avatar-sm"
                              src="../src/assets/images/users/avatar-1.jpg"
                              alt="Generic placeholder image"
                            />
                          </div>
                          <div class="flex-grow-1">
                            <h6 class="font-size-15">Bottom-aligned media</h6>
                            <p class="text-muted mb-0">
                              Cras sit amet nibh libero, in gravida nulla. Nulla
                              vel metus scelerisque ante sollicitudin. Cras
                              purus odio, vestibulum in vulputate at, tempus
                              viverra turpis. Fusce condimentum nunc ac nisi
                              vulputate fringilla. Donec lacinia congue felis in
                              faucibus.
                            </p>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->
                  </div>
                  <!-- End card-body -->
                </div>
                <!-- End card -->
              </div>
              <!-- End col -->
            </div>
            <!-- End row -->

            <!-- Start cards -->
            <div class="row">
              <div class="col-lg-12">
                <div class="card" id="cards">
                  <div class="card-body">
                    <h4 class="card-title mb-4">Cards</h4>

                    <div class="row">
                      <div class="col-md-6 col-xl-3">
                        <!-- Simple card -->
                        <div class="card border">
                          <img
                            class="card-img-top img-fluid rounded-top"
                            src="../src/assets/images/media/img-1.jpg"
                            alt="Card image cap"
                          />
                          <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">
                              Some quick example text to build on the card title
                              and make up the bulk of the card's content.
                            </p>
                            <a
                              href="javascript: void(0);"
                              class="btn btn-primary waves-effect waves-light"
                              >Button</a
                            >
                          </div>
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-md-6 col-xl-3">
                        <div class="card border">
                          <img
                            class="card-img-top img-fluid rounded-top"
                            src="../src/assets/images/media/img-2.jpg"
                            alt="Card image cap"
                          />
                          <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">
                              Some quick example text to build on the card title
                              and make up the bulk of the card's content.
                            </p>
                          </div>
                          <ul class="list-group list-group-flush">
                            <li class="list-group-item text-truncate">
                              Cras justo odio
                            </li>
                            <li class="list-group-item text-truncate">
                              Dapibus ac facilisis in
                            </li>
                          </ul>
                          <div class="card-body">
                            <a href="javascript: void(0);" class="card-link"
                              >Card link</a
                            >
                            <a href="javascript: void(0);" class="card-link"
                              >Another link</a
                            >
                          </div>
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-xl-6">
                        <div class="card border overflow-hidden">
                          <div class="row no-gutters">
                            <div class="col-md-6">
                              <img
                                class="card-img img-fluid"
                                src="../src/assets/images/media/img-3.jpg"
                                alt="Card image"
                              />
                            </div>
                            <div class="col-md-6 align-self-center">
                              <div class="card-body">
                                <h5 class="card-title">Card title</h5>
                                <p class="card-text">
                                  This is a wider card with as a to additional
                                  content.
                                </p>
                                <p class="card-text">
                                  <small class="text-muted"
                                    >Last updated 3 mins ago</small
                                  >
                                </p>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div class="card border overflow-hidden">
                          <div class="row no-gutters">
                            <div class="col-md-6 align-self-center">
                              <div class="card-body">
                                <h5 class="card-title">Card title</h5>
                                <p class="card-text">
                                  This is a wider card with as a to additional
                                  content.
                                </p>
                                <p class="card-text">
                                  <small class="text-muted"
                                    >Last updated 3 mins ago</small
                                  >
                                </p>
                              </div>
                            </div>

                            <div class="col-md-6">
                              <img
                                class="card-img img-fluid"
                                src="../src/assets/images/media/img-4.jpg"
                                alt="Card image"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->

                    <div class="row mb-2">
                      <div class="col-lg-12">
                        <h4 class="font-size-14 mb-4">Card background Color</h4>
                      </div>
                      <div class="col-lg-4">
                        <div
                          class="card bg-primary border-primary text-white-50"
                        >
                          <div class="card-body">
                            <h5
                              class="mb-4 text-white card-title text-truncate"
                            >
                              <i class="mdi mdi-bullseye-arrow me-2"></i>
                              Primary Card
                            </h5>
                            <p class="card-text">
                              If several languages coalesce, the grammar of the
                              resulting individual
                            </p>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-lg-4">
                        <div
                          class="card bg-success border-success text-white-50"
                        >
                          <div class="card-body">
                            <h5
                              class="mb-4 text-white card-title text-truncate"
                            >
                              <i class="mdi mdi-check-all me-2"></i> Success
                              Card
                            </h5>
                            <p class="card-text">
                              If several languages coalesce, the grammar of the
                              resulting individual
                            </p>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-lg-4">
                        <div class="card bg-info border-info text-white-50">
                          <div class="card-body">
                            <h5
                              class="mb-4 text-white card-title text-truncate"
                            >
                              <i class="mdi mdi-alert-circle-outline me-2"></i
                              >Info Card
                            </h5>
                            <p class="card-text">
                              If several languages coalesce, the grammar of the
                              resulting individual
                            </p>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->

                    <div class="row">
                      <div class="col-lg-12">
                        <h4 class="font-size-14 mb-4">Card Border Color</h4>
                      </div>
                      <div class="col-lg-4">
                        <div class="card border border-warning mb-lg-0">
                          <div
                            class="card-header bg-transparent border-warning"
                          >
                            <h5
                              class="mb-0 text-warning card-title text-truncate"
                            >
                              <i class="mdi mdi-alert me-2"></i>Warning outline
                              Card
                            </h5>
                          </div>
                          <div class="card-body">
                            <h5 class="card-title">card title</h5>
                            <p class="card-text">
                              If several languages coalesce, the grammar of the
                              resulting individual
                            </p>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-lg-4">
                        <div class="card border border-danger mb-lg-0">
                          <div class="card-header bg-transparent border-danger">
                            <h5
                              class="my-0 text-danger card-title text-truncate"
                            >
                              <i class="mdi mdi-block-helper me-2"></i>Danger
                              outline Card
                            </h5>
                          </div>
                          <div class="card-body">
                            <h5 class="card-title">card title</h5>
                            <p class="card-text">
                              If several languages coalesce, the grammar of the
                              resulting individual
                            </p>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-lg-4">
                        <div class="card border border-success mb-0">
                          <div
                            class="card-header bg-transparent border-success"
                          >
                            <h5
                              class="my-0 text-success card-title text-truncate"
                            >
                              <i class="mdi mdi-check-all me-2"></i>Success Card
                            </h5>
                          </div>
                          <div class="card-body">
                            <h5 class="card-title">card title</h5>
                            <p class="card-text">
                              If several languages coalesce, the grammar of the
                              resulting individual
                            </p>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->
                  </div>
                  <!-- End card-body -->
                </div>
                <!-- End card -->
              </div>
              <!-- End col -->
            </div>
            <!-- End row -->
            <!-- End cards -->

            <!-- Start Tabs & Accordions -->
            <div class="row">
              <div class="col-lg-12">
                <div class="card" id="collapse">
                  <div class="card-body">
                    <h4 class="card-title mb-4">Collapse</h4>

                    <div class="row">
                      <div class="col-xl-6">
                        <div>
                          <h5 class="font-size-14">Basic Collapse</h5>
                          <p class="card-title-desc">
                            You can use a link with the
                            <code>href</code> attribute, or a button with the
                            <code>data-bs-target</code> attribute. In both
                            cases, the <code>data-bs-toggle="collapse"</code> is
                            required.
                          </p>

                          <p class="d-flex flex-wrap gap-2">
                            <a
                              class="btn btn-primary"
                              data-bs-toggle="collapse"
                              href="#collapseExample"
                              role="button"
                              aria-expanded="false"
                              aria-controls="collapseExample"
                            >
                              Link with href
                            </a>
                            <button
                              class="btn btn-primary"
                              type="button"
                              data-bs-toggle="collapse"
                              data-bs-target="#collapseExample"
                              aria-expanded="false"
                              aria-controls="collapseExample"
                            >
                              Button with data-bs-target
                            </button>
                          </p>
                          <div class="collapse show" id="collapseExample">
                            <div class="card card-body">
                              Some placeholder content for the collapse
                              component. This panel is hidden by default but
                              revealed when the user activates the relevant
                              trigger.
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-xl-6">
                        <div class="mt-4 mt-xl-0">
                          <h5 class="font-size-14">
                            Basic Horizontal Collapse
                          </h5>
                          <p class="card-title-desc">
                            The collapse plugin also supports horizontal
                            collapsing. Add the
                            <code>.collapse-horizontal</code> modifier class to
                            transition the <code>width</code> instead of
                            <code>height</code> and set a <code>width</code> on
                            the immediate child element.
                          </p>

                          <p>
                            <button
                              class="btn btn-primary"
                              type="button"
                              data-bs-toggle="collapse"
                              data-bs-target="#collapseWidthExample"
                              aria-expanded="false"
                              aria-controls="collapseWidthExample"
                            >
                              Toggle width collapse
                            </button>
                          </p>
                          <div style="min-height: 130px">
                            <div
                              class="collapse collapse-horizontal show"
                              id="collapseWidthExample"
                            >
                              <div class="card card-body" style="width: 300px">
                                This is some placeholder content for a
                                horizontal collapse. It's hidden by default and
                                shown when triggered.
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->

                    <div class="row mt-3">
                      <div class="col-xl-12">
                        <div class="mt-4">
                          <h5 class="font-size-14">
                            Multiple Targets Collapse
                          </h5>
                          <p class="card-title-desc">
                            A <code>&lt;button&gt;</code> or
                            <code>&lt;a&gt;</code> can show and hide multiple
                            elements by referencing them with a selector in its
                            <code>href</code> or
                            <code>data-bs-target</code> attribute.
                          </p>

                          <p class="d-flex flex-wrap gap-2">
                            <a
                              class="btn btn-primary"
                              data-bs-toggle="collapse"
                              href="#multiCollapseExample1"
                              role="button"
                              aria-expanded="false"
                              aria-controls="multiCollapseExample1"
                              >Toggle first element</a
                            >
                            <button
                              class="btn btn-primary"
                              type="button"
                              data-bs-toggle="collapse"
                              data-bs-target="#multiCollapseExample2"
                              aria-expanded="false"
                              aria-controls="multiCollapseExample2"
                            >
                              Toggle second element
                            </button>
                            <button
                              class="btn btn-primary"
                              type="button"
                              data-bs-toggle="collapse"
                              data-bs-target=".multi-collapse"
                              aria-expanded="false"
                              aria-controls="multiCollapseExample1 multiCollapseExample2"
                            >
                              Toggle both elements
                            </button>
                          </p>
                          <div class="row">
                            <div class="col">
                              <div
                                class="collapse multi-collapse show"
                                id="multiCollapseExample1"
                              >
                                <div class="card card-body mb-0">
                                  Some placeholder content for the first
                                  collapse component of this multi-collapse
                                  example. This panel is hidden by default but
                                  revealed when the user activates the relevant
                                  trigger.
                                </div>
                              </div>
                            </div>
                            <div class="col">
                              <div
                                class="collapse multi-collapse"
                                id="multiCollapseExample2"
                              >
                                <div class="card card-body mb-0">
                                  Some placeholder content for the second
                                  collapse component of this multi-collapse
                                  example. This panel is hidden by default but
                                  revealed when the user activates the relevant
                                  trigger.
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->
                  </div>
                  <!-- End card-body -->
                </div>
                <!-- End card -->
              </div>
              <!-- End col -->
            </div>
            <!-- End row -->
            <!-- End Tabs & Accordions -->

            <!-- Start Tabs & Accordions -->
            <div class="row">
              <div class="col-lg-12">
                <div class="card" id="tabs-accordions">
                  <div class="card-body">
                    <h4 class="card-title mb-4">Tabs & Accordions</h4>

                    <div class="row">
                      <div class="col-xl-6">
                        <div>
                          <h5 class="font-size-14">Basic Tabs</h5>
                          <p class="card-title-desc">
                            Example of Default Nav Tabs
                          </p>

                          <!-- Nav tabs -->
                          <ul class="nav nav-tabs" role="tablist">
                            <li class="nav-item">
                              <a
                                class="nav-link active"
                                data-bs-toggle="tab"
                                href="#home"
                                role="tab"
                              >
                                <span class="d-block d-sm-none"
                                  ><i class="fas fa-home"></i
                                ></span>
                                <span class="d-none d-sm-block">Home</span>
                              </a>
                            </li>
                            <li class="nav-item">
                              <a
                                class="nav-link"
                                data-bs-toggle="tab"
                                href="#profile"
                                role="tab"
                              >
                                <span class="d-block d-sm-none"
                                  ><i class="far fa-user"></i
                                ></span>
                                <span class="d-none d-sm-block">Profile</span>
                              </a>
                            </li>
                            <li class="nav-item">
                              <a
                                class="nav-link"
                                data-bs-toggle="tab"
                                href="#messages"
                                role="tab"
                              >
                                <span class="d-block d-sm-none"
                                  ><i class="far fa-envelope"></i
                                ></span>
                                <span class="d-none d-sm-block">Messages</span>
                              </a>
                            </li>
                            <li class="nav-item">
                              <a
                                class="nav-link"
                                data-bs-toggle="tab"
                                href="#settings"
                                role="tab"
                              >
                                <span class="d-block d-sm-none"
                                  ><i class="fas fa-cog"></i
                                ></span>
                                <span class="d-none d-sm-block">Settings</span>
                              </a>
                            </li>
                          </ul>

                          <!-- Tab panes -->
                          <div
                            class="tab-content p-3 border border-top-0 rounded-bottom text-muted"
                          >
                            <div
                              class="tab-pane active"
                              id="home"
                              role="tabpanel"
                            >
                              <p class="mb-0">
                                Raw denim you probably haven't heard of them
                                jean shorts Austin. Nesciunt tofu stumptown
                                aliqua, retro synth master cleanse. Mustache
                                cliche tempor, williamsburg carles vegan
                                helvetica. Reprehenderit butcher retro keffiyeh
                                dreamcatcher synth. Cosby sweater eu banh
                                iphone. Seitan aliquip butcher voluptate nisi
                                qui.
                              </p>
                            </div>
                            <div class="tab-pane" id="profile" role="tabpanel">
                              <p class="mb-0">
                                Food truck fixie locavore, accusamus mcsweeney's
                                marfa nulla single-origin coffee squid.
                                Exercitation +1 labore velit, blog sartorial PBR
                                leggings next level wes anderson artisan four
                                loko farm-to-table craft beer twee. Qui photo
                                booth letterpress, aesthetic magna delectus.
                              </p>
                            </div>
                            <div class="tab-pane" id="messages" role="tabpanel">
                              <p class="mb-0">
                                Etsy mixtape wayfarers, ethical wes anderson
                                tofu before they sold out mcsweeney's organic
                                lomo retro fanny pack lo-fi farm-to-table
                                readymade. Messenger bag gentrify pitchfork
                                tattooed craft beer, iphone skateboard locavore
                                carles etsy mi whatever gluten yr.
                              </p>
                            </div>
                            <div class="tab-pane" id="settings" role="tabpanel">
                              <p class="mb-0">
                                Trust fund seitan letterpress, keytar raw denim
                                keffiyeh etsy art party before they sold out
                                master cleanse gluten-free squid scenester
                                freegan cosby sweater. Fanny pack portland
                                seitan DIY, art party locavore wolf cliche high
                                life echo park Austin. Cred vinyl keffiyeh DIY
                                salvia farm-to-table VHS.
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-xl-6">
                        <div class="mt-4 mt-xl-0">
                          <h5 class="font-size-14">Basic Nav Pills</h5>
                          <p class="card-title-desc">
                            Example of Default Nav Pills
                          </p>

                          <!-- Nav tabs -->
                          <ul class="nav nav-pills" role="tablist">
                            <li class="nav-item waves-effect waves-light">
                              <a
                                class="nav-link active"
                                data-bs-toggle="tab"
                                href="#home-1"
                                role="tab"
                              >
                                <span class="d-block d-sm-none"
                                  ><i class="fas fa-home"></i
                                ></span>
                                <span class="d-none d-sm-block">Home</span>
                              </a>
                            </li>
                            <li class="nav-item waves-effect waves-light">
                              <a
                                class="nav-link"
                                data-bs-toggle="tab"
                                href="#profile-1"
                                role="tab"
                              >
                                <span class="d-block d-sm-none"
                                  ><i class="far fa-user"></i
                                ></span>
                                <span class="d-none d-sm-block">Profile</span>
                              </a>
                            </li>
                            <li class="nav-item waves-effect waves-light">
                              <a
                                class="nav-link"
                                data-bs-toggle="tab"
                                href="#messages-1"
                                role="tab"
                              >
                                <span class="d-block d-sm-none"
                                  ><i class="far fa-envelope"></i
                                ></span>
                                <span class="d-none d-sm-block">Messages</span>
                              </a>
                            </li>
                            <li class="nav-item waves-effect waves-light">
                              <a
                                class="nav-link"
                                data-bs-toggle="tab"
                                href="#settings-1"
                                role="tab"
                              >
                                <span class="d-block d-sm-none"
                                  ><i class="fas fa-cog"></i
                                ></span>
                                <span class="d-none d-sm-block">Settings</span>
                              </a>
                            </li>
                          </ul>

                          <!-- Tab panes -->
                          <div class="tab-content p-3 text-muted">
                            <div
                              class="tab-pane active"
                              id="home-1"
                              role="tabpanel"
                            >
                              <p class="mb-0">
                                Raw denim you probably haven't heard of them
                                jean shorts Austin. Nesciunt tofu stumptown
                                aliqua, retro synth master cleanse. Mustache
                                cliche tempor, williamsburg carles vegan
                                helvetica. Reprehenderit qui irure terry
                                richardson ex squid. Aliquip placeat salvia
                                cillum iphone. Seitan aliquip quis cardigan
                                american apparel
                              </p>
                            </div>
                            <div
                              class="tab-pane"
                              id="profile-1"
                              role="tabpanel"
                            >
                              <p class="mb-0">
                                Food truck fixie locavore, accusamus mcsweeney's
                                marfa nulla single-origin coffee squid.
                                Exercitation +1 labore velit, blog sartorial PBR
                                leggings next level wes anderson artisan four
                                loko farm-to-table craft beer twee. Qui photo
                                booth letterpress, vinyl cillum PBR. Homo
                                nostrud organic labore
                              </p>
                            </div>
                            <div
                              class="tab-pane"
                              id="messages-1"
                              role="tabpanel"
                            >
                              <p class="mb-0">
                                Etsy mixtape wayfarers, ethical wes anderson
                                tofu before they sold out mcsweeney's organic
                                lomo retro fanny pack lo-fi farm-to-table
                                readymade. Messenger bag gentrify pitchfork
                                tattooed craft beer, iphone skateboard locavore
                                carles etsy Leggings gentrify squid 8-bit cred
                                pitchfork
                              </p>
                            </div>
                            <div
                              class="tab-pane"
                              id="settings-1"
                              role="tabpanel"
                            >
                              <p class="mb-0">
                                Trust fund seitan letterpress, keytar raw denim
                                keffiyeh etsy art party before they sold out
                                master cleanse gluten-free squid scenester
                                freegan cosby sweater. Fanny pack portland
                                seitan DIY, vinyl keffiyeh DIY salvia PBR, banh
                                mi before they sold out farm-to-table.
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->

                    <div class="row mt-3">
                      <div class="col-xl-6">
                        <div class="mt-4">
                          <h5 class="font-size-14">Custom Nav Tabs</h5>
                          <p class="card-title-desc">
                            Example of Custom Nav Tabs
                          </p>

                          <!-- Nav tabs -->
                          <ul
                            class="nav nav-tabs nav-tabs-custom nav-justified"
                            role="tablist"
                          >
                            <li class="nav-item">
                              <a
                                class="nav-link active"
                                data-bs-toggle="tab"
                                href="#home1"
                                role="tab"
                              >
                                <span class="d-block d-sm-none"
                                  ><i class="fas fa-home"></i
                                ></span>
                                <span class="d-none d-sm-block">Home</span>
                              </a>
                            </li>
                            <li class="nav-item">
                              <a
                                class="nav-link"
                                data-bs-toggle="tab"
                                href="#profile1"
                                role="tab"
                              >
                                <span class="d-block d-sm-none"
                                  ><i class="far fa-user"></i
                                ></span>
                                <span class="d-none d-sm-block">Profile</span>
                              </a>
                            </li>
                            <li class="nav-item">
                              <a
                                class="nav-link"
                                data-bs-toggle="tab"
                                href="#messages1"
                                role="tab"
                              >
                                <span class="d-block d-sm-none"
                                  ><i class="far fa-envelope"></i
                                ></span>
                                <span class="d-none d-sm-block">Messages</span>
                              </a>
                            </li>
                            <li class="nav-item">
                              <a
                                class="nav-link"
                                data-bs-toggle="tab"
                                href="#settings1"
                                role="tab"
                              >
                                <span class="d-block d-sm-none"
                                  ><i class="fas fa-cog"></i
                                ></span>
                                <span class="d-none d-sm-block">Settings</span>
                              </a>
                            </li>
                          </ul>

                          <!-- Tab panes -->
                          <div class="tab-content p-3 text-muted">
                            <div
                              class="tab-pane active"
                              id="home1"
                              role="tabpanel"
                            >
                              <p class="mb-0">
                                Raw denim you probably haven't heard of them
                                jean shorts Austin. Nesciunt tofu stumptown
                                aliqua, retro synth master cleanse. Mustache
                                cliche tempor, williamsburg carles vegan
                                helvetica. Reprehenderit qui irure terry
                                richardson ex squid. Aliquip placeat salvia
                                cillum iphone. Seitan aliquip quis butcher
                              </p>
                            </div>
                            <div class="tab-pane" id="profile1" role="tabpanel">
                              <p class="mb-0">
                                Food truck fixie locavore, accusamus mcsweeney's
                                marfa nulla single-origin coffee squid.
                                Exercitation +1 labore velit, blog farm-to-table
                                craft beer twee. Qui photo booth letterpress,
                                commodo enim craft beer mlkshk aliquip jean
                                shorts ullamco ad vinyl cillum PBR. Homo nostrud
                                organic
                              </p>
                            </div>
                            <div
                              class="tab-pane"
                              id="messages1"
                              role="tabpanel"
                            >
                              <p class="mb-0">
                                Etsy mixtape wayfarers, ethical wes anderson
                                tofu before they sold out mcsweeney's organic
                                lomo retro fanny pack lo-fi tattooed craft beer,
                                iphone skateboard locavore carles etsy salvia
                                banksy hoodie helvetica. DIY synth PBR banksy
                                irony. Leggings gentrify squid 8-bit cred
                                pitchfork
                              </p>
                            </div>
                            <div
                              class="tab-pane"
                              id="settings1"
                              role="tabpanel"
                            >
                              <p class="mb-0">
                                Trust fund seitan letterpress, keytar raw denim
                                keffiyeh etsy art party before they sold out
                                master cleanse gluten-free squid art party
                                locavore wolf cliche high life echo park Austin.
                                Cred vinyl keffiyeh DIY salvia PBR, banh mi
                                before they sold out farm-to-table VHS viral
                                locavore cosby.
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-xl-6">
                        <div class="mt-4">
                          <h5 class="font-size-14">Vertical Nav Tabs</h5>
                          <p class="card-title-desc">
                            Use <code>flex-column</code> class to create
                            Vertical nav tabs.
                          </p>
                          <div class="d-flex align-items-start">
                            <div
                              class="nav flex-column nav-pills me-3"
                              id="v-pills-tab"
                              role="tablist"
                              aria-orientation="vertical"
                            >
                              <button
                                class="nav-link active"
                                id="v-pills-home-tab"
                                data-bs-toggle="pill"
                                data-bs-target="#v-pills-home"
                                type="button"
                                role="tab"
                                aria-controls="v-pills-home"
                                aria-selected="true"
                              >
                                Home
                              </button>
                              <button
                                class="nav-link"
                                id="v-pills-profile-tab"
                                data-bs-toggle="pill"
                                data-bs-target="#v-pills-profile"
                                type="button"
                                role="tab"
                                aria-controls="v-pills-profile"
                                aria-selected="false"
                              >
                                Profile
                              </button>
                              <button
                                class="nav-link"
                                id="v-pills-messages-tab"
                                data-bs-toggle="pill"
                                data-bs-target="#v-pills-messages"
                                type="button"
                                role="tab"
                                aria-controls="v-pills-messages"
                                aria-selected="false"
                              >
                                Messages
                              </button>
                              <button
                                class="nav-link"
                                id="v-pills-settings-tab"
                                data-bs-toggle="pill"
                                data-bs-target="#v-pills-settings"
                                type="button"
                                role="tab"
                                aria-controls="v-pills-settings"
                                aria-selected="false"
                              >
                                Settings
                              </button>
                            </div>
                            <div class="tab-content" id="v-pills-tabContent">
                              <div
                                class="tab-pane fade text-muted show active"
                                id="v-pills-home"
                                role="tabpanel"
                                aria-labelledby="v-pills-home-tab"
                                tabindex="0"
                              >
                                Anim pariatur cliche reprehenderit, enim eiusmod
                                high life accusamus terry richardson ad squid. 3
                                wolf moon officia aute, non cupidatat skateboard
                                dolor brunch. Food truck quinoa nesciunt laborum
                                eiusmod. Brunch 3 wolf moon tempor, nulla
                                assumenda shoreditch et.
                              </div>
                              <div
                                class="tab-pane fade text-muted"
                                id="v-pills-profile"
                                role="tabpanel"
                                aria-labelledby="v-pills-profile-tab"
                                tabindex="0"
                              >
                                sunt aliqua put a bird on it squid single-origin
                                coffee nulla assumenda shoreditch et. Nihil anim
                                keffiyeh helvetica, craft beer labore wes
                                anderson cred nesciunt Leggings occaecat craft
                                beer farm-to-table, raw denim accusamus labore
                                sustainable VHS.
                              </div>
                              <div
                                class="tab-pane fade text-muted"
                                id="v-pills-disabled"
                                role="tabpanel"
                                aria-labelledby="v-pills-disabled-tab"
                                tabindex="0"
                              >
                                Raw denim you probably haven't heard of them
                                jean shorts Austin. Nesciunt tofu stumptown
                                aliqua, retro synth master cleanse. Mustache
                                cliche tempor, williamsburg carles vegan
                                helvetica. Reprehenderit qui irure terry
                                richardson ex squid. Aliquip placeat salvia
                                cillum iphone. Seitan aliquip quis cardigan
                                american apparel
                              </div>
                              <div
                                class="tab-pane fade text-muted"
                                id="v-pills-messages"
                                role="tabpanel"
                                aria-labelledby="v-pills-messages-tab"
                                tabindex="0"
                              >
                                Etsy mixtape wayfarers, ethical wes anderson
                                tofu before they sold out mcsweeney's organic
                                lomo retro fanny pack lo-fi farm-to-table
                                readymade. Messenger bag gentrify pitchfork
                                tattooed craft beer, iphone skateboard locavore
                                carles etsy mi whatever gluten yr.
                              </div>
                              <div
                                class="tab-pane fade text-muted"
                                id="v-pills-settings"
                                role="tabpanel"
                                aria-labelledby="v-pills-settings-tab"
                                tabindex="0"
                              >
                                Food truck fixie locavore, accusamus mcsweeney's
                                marfa nulla single-origin coffee squid.
                                Exercitation +1 labore velit, blog farm-to-table
                                craft beer twee. Qui photo booth letterpress,
                                commodo enim craft beer mlkshk aliquip jean
                                shorts ullamco ad vinyl cillum PBR. Homo nostrud
                                organic
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->

                    <div class="row">
                      <div class="col-xl-6">
                        <div class="mt-4">
                          <h5 class="font-size-14">Basic Accordions</h5>
                          <p class="card-title-desc">
                            Extend the default collapse behavior to create an
                            accordion.
                          </p>

                          <div class="accordion" id="accordionExample">
                            <div class="accordion-item">
                              <h2 class="accordion-header" id="headingOne">
                                <button
                                  class="accordion-button"
                                  type="button"
                                  data-bs-toggle="collapse"
                                  data-bs-target="#collapseOne"
                                  aria-expanded="true"
                                  aria-controls="collapseOne"
                                >
                                  Collapsible Group Item #1
                                </button>
                              </h2>
                              <div
                                id="collapseOne"
                                class="accordion-collapse collapse show"
                                aria-labelledby="headingOne"
                                data-bs-parent="#accordionExample"
                              >
                                <div class="accordion-body">
                                  Anim pariatur cliche reprehenderit, enim
                                  eiusmod high life accusamus terry richardson
                                  ad squid. 3 wolf moon officia aute, non
                                  cupidatat skateboard dolor brunch. Food truck
                                  quinoa nesciunt laborum eiusmod. Brunch 3 wolf
                                  moon tempor, nulla assumenda shoreditch et.
                                </div>
                              </div>
                            </div>
                            <div class="accordion-item">
                              <h2 class="accordion-header" id="headingTwo">
                                <button
                                  class="accordion-button collapsed"
                                  type="button"
                                  data-bs-toggle="collapse"
                                  data-bs-target="#collapseTwo"
                                  aria-expanded="false"
                                  aria-controls="collapseTwo"
                                >
                                  Collapsible Group Item #2
                                </button>
                              </h2>
                              <div
                                id="collapseTwo"
                                class="accordion-collapse collapse"
                                aria-labelledby="headingTwo"
                                data-bs-parent="#accordionExample"
                              >
                                <div class="accordion-body">
                                  sunt aliqua put a bird on it squid
                                  single-origin coffee nulla assumenda
                                  shoreditch et. Nihil anim keffiyeh helvetica,
                                  craft beer labore wes anderson cred nesciunt
                                  Leggings occaecat craft beer farm-to-table,
                                  raw denim accusamus labore sustainable VHS.
                                </div>
                              </div>
                            </div>
                            <div class="accordion-item">
                              <h2 class="accordion-header" id="headingThree">
                                <button
                                  class="accordion-button collapsed"
                                  type="button"
                                  data-bs-toggle="collapse"
                                  data-bs-target="#collapseThree"
                                  aria-expanded="false"
                                  aria-controls="collapseThree"
                                >
                                  Collapsible Group Item #3
                                </button>
                              </h2>
                              <div
                                id="collapseThree"
                                class="accordion-collapse collapse"
                                aria-labelledby="headingThree"
                                data-bs-parent="#accordionExample"
                              >
                                <div class="accordion-body">
                                  Anim pariatur cliche reprehenderit, enim
                                  eiusmod high life accusamus terry richardson
                                  ad squid. 3 wolf moon officia aute, non
                                  cupidatat skateboard dolor brunch. Food truck
                                  quinoa nesciunt laborum eiusmod. Brunch 3 wolf
                                  moon tempor, nulla assumenda shoreditch et.
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                      <div class="col-xl-6">
                        <div class="mt-4">
                          <h5 class="font-size-14">Accordion Flush</h5>
                          <p class="card-title-desc">
                            Add <code>.accordion-flush</code> to remove the
                            default <code>background-color</code>, some borders,
                            and some rounded corners to render accordions
                            edge-to-edge with their parent container.
                          </p>

                          <div
                            class="accordion accordion-flush"
                            id="accordionFlushExample"
                          >
                            <div class="accordion-item">
                              <h2
                                class="accordion-header"
                                id="flush-headingOne"
                              >
                                <button
                                  class="accordion-button collapsed"
                                  type="button"
                                  data-bs-toggle="collapse"
                                  data-bs-target="#flush-collapseOne"
                                  aria-expanded="false"
                                  aria-controls="flush-collapseOne"
                                >
                                  Accordion Item #1
                                </button>
                              </h2>
                              <div
                                id="flush-collapseOne"
                                class="accordion-collapse collapse show"
                                aria-labelledby="flush-headingOne"
                                data-bs-parent="#accordionFlushExample"
                              >
                                <div class="accordion-body">
                                  Placeholder content for this accordion, which
                                  is intended to demonstrate the
                                  .accordion-flush class. This is the second
                                  item's accordion body. Let's imagine this
                                  being filled with some actual content.
                                </div>
                              </div>
                            </div>
                            <div class="accordion-item">
                              <h2
                                class="accordion-header"
                                id="flush-headingTwo"
                              >
                                <button
                                  class="accordion-button collapsed"
                                  type="button"
                                  data-bs-toggle="collapse"
                                  data-bs-target="#flush-collapseTwo"
                                  aria-expanded="false"
                                  aria-controls="flush-collapseTwo"
                                >
                                  Accordion Item #2
                                </button>
                              </h2>
                              <div
                                id="flush-collapseTwo"
                                class="accordion-collapse collapse"
                                aria-labelledby="flush-headingTwo"
                                data-bs-parent="#accordionFlushExample"
                              >
                                <div class="accordion-body">
                                  Placeholder content for this accordion, which
                                  is intended to demonstrate the
                                  <code>.accordion-flush</code> class. This is
                                  the second item's accordion body. Let's
                                  imagine this being filled with some actual
                                  content.
                                </div>
                              </div>
                            </div>
                            <div class="accordion-item">
                              <h2
                                class="accordion-header"
                                id="flush-headingThree"
                              >
                                <button
                                  class="accordion-button collapsed"
                                  type="button"
                                  data-bs-toggle="collapse"
                                  data-bs-target="#flush-collapseThree"
                                  aria-expanded="false"
                                  aria-controls="flush-collapseThree"
                                >
                                  Accordion Item #3
                                </button>
                              </h2>
                              <div
                                id="flush-collapseThree"
                                class="accordion-collapse collapse"
                                aria-labelledby="flush-headingThree"
                                data-bs-parent="#accordionFlushExample"
                              >
                                <div class="accordion-body">
                                  Placeholder content for this accordion, which
                                  is intended to demonstrate the
                                  <code>.accordion-flush</code> class. This is
                                  the third item's accordion body. Nothing more
                                  exciting happening here in terms of content,
                                  but just filling up the space to make it look,
                                  at least at first glance, a bit more
                                  representative of how this would look in a
                                  real-world application.
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!--end row-->
                  </div>
                  <!-- End card-body -->
                </div>
                <!-- End card -->
              </div>
              <!-- End col -->
            </div>
            <!-- End row -->
            <!-- End Tabs & Accordions -->

            <!-- Start Offcanvas -->
            <div class="row">
              <div class="col-lg-12">
                <div class="card" id="offcanvas">
                  <div class="card-body">
                    <h4 class="card-title mb-4">Offcanvas</h4>

                    <div class="row">
                      <div class="col-lg-6">
                        <h5 class="card-title">Demo</h5>
                        <p class="card-title-desc">
                          Use the buttons below to show and hide an offcanvas
                          element via JavaScript that toggles the
                          <code>.show</code> class on an element with the
                          <code>.offcanvas</code> class.
                        </p>

                        <div class="d-flex flex-wrap gap-2">
                          <a
                            class="btn btn-primary"
                            data-bs-toggle="offcanvas"
                            href="#offcanvasExample"
                            role="button"
                            aria-controls="offcanvasExample"
                          >
                            Link with href
                          </a>
                          <button
                            class="btn btn-primary"
                            type="button"
                            data-bs-toggle="offcanvas"
                            data-bs-target="#offcanvasExample"
                            aria-controls="offcanvasExample"
                          >
                            Button with data-bs-target
                          </button>
                        </div>

                        <div
                          class="offcanvas offcanvas-start"
                          tabindex="-1"
                          id="offcanvasExample"
                          aria-labelledby="offcanvasExampleLabel"
                        >
                          <div class="offcanvas-header">
                            <h5
                              class="offcanvas-title"
                              id="offcanvasExampleLabel"
                            >
                              Offcanvas
                            </h5>
                            <button
                              type="button"
                              class="btn-close text-reset"
                              data-bs-dismiss="offcanvas"
                              aria-label="Close"
                            ></button>
                          </div>
                          <div class="offcanvas-body">
                            <div>
                              Some text as placeholder. In real life you can
                              have the elements you have chosen. Like, text,
                              images, lists, etc.
                            </div>
                            <div class="dropdown mt-3">
                              <button
                                class="btn btn-primary dropdown-toggle"
                                type="button"
                                id="dropdownMenuButton"
                                data-bs-toggle="dropdown"
                              >
                                Dropdown button
                                <i class="mdi mdi-chevron-down"></i>
                              </button>
                              <ul
                                class="dropdown-menu"
                                aria-labelledby="dropdownMenuButton"
                              >
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Action</a
                                  >
                                </li>
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Another action</a
                                  >
                                </li>
                                <li>
                                  <a
                                    class="dropdown-item"
                                    href="javascript: void(0);"
                                    >Something else here</a
                                  >
                                </li>
                              </ul>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-lg-6 mt-4 mt-lg-0">
                        <h5 class="card-title">Placement</h5>
                        <p class="card-title-desc">
                          Offcanvas Diffrent Placement Example: Left, Right &
                          Bottom
                        </p>

                        <div class="d-flex flex-wrap gap-2">
                          <button
                            class="btn btn-primary"
                            type="button"
                            data-bs-toggle="offcanvas"
                            data-bs-target="#offcanvasTop"
                            aria-controls="offcanvasTop"
                          >
                            Toggle top offcanvas
                          </button>

                          <div
                            class="offcanvas offcanvas-top"
                            tabindex="-1"
                            id="offcanvasTop"
                            aria-labelledby="offcanvasTopLabel"
                          >
                            <div class="offcanvas-header">
                              <h5 id="offcanvasTopLabel">Offcanvas top</h5>
                              <button
                                type="button"
                                class="btn-close text-reset"
                                data-bs-dismiss="offcanvas"
                                aria-label="Close"
                              ></button>
                            </div>
                            <div class="offcanvas-body">...</div>
                          </div>

                          <button
                            class="btn btn-primary"
                            type="button"
                            data-bs-toggle="offcanvas"
                            data-bs-target="#offcanvasRight"
                            aria-controls="offcanvasRight"
                          >
                            Toggle right offcanvas
                          </button>

                          <div
                            class="offcanvas offcanvas-end"
                            tabindex="-1"
                            id="offcanvasRight"
                            aria-labelledby="offcanvasRightLabel"
                          >
                            <div class="offcanvas-header">
                              <h5 id="offcanvasRightLabel">Offcanvas right</h5>
                              <button
                                type="button"
                                class="btn-close text-reset"
                                data-bs-dismiss="offcanvas"
                                aria-label="Close"
                              ></button>
                            </div>
                            <div class="offcanvas-body">...</div>
                          </div>

                          <button
                            class="btn btn-primary"
                            type="button"
                            data-bs-toggle="offcanvas"
                            data-bs-target="#offcanvasBottom"
                            aria-controls="offcanvasBottom"
                          >
                            Toggle bottom offcanvas
                          </button>

                          <div
                            class="offcanvas offcanvas-bottom"
                            tabindex="-1"
                            id="offcanvasBottom"
                            aria-labelledby="offcanvasBottomLabel"
                          >
                            <div class="offcanvas-header">
                              <h5
                                class="offcanvas-title"
                                id="offcanvasBottomLabel"
                              >
                                Offcanvas bottom
                              </h5>
                              <button
                                type="button"
                                class="btn-close text-reset"
                                data-bs-dismiss="offcanvas"
                                aria-label="Close"
                              ></button>
                            </div>
                            <div class="offcanvas-body small">...</div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->

                    <div class="row mt-4">
                      <div class="col-lg-12">
                        <h5 class="card-title">Backdrop</h5>
                        <p class="card-title-desc">
                          Scrolling the <code>&lt;body&gt;</code> element is
                          disabled when an offcanvas and its backdrop are
                          visible. Use the <code>data-bs-scroll</code> attribute
                          to toggle <code>&lt;body&gt;</code> scrolling and
                          <code>data-bs-backdrop</code> to toggle the backdrop.
                        </p>

                        <div class="d-flex flex-wrap gap-2">
                          <button
                            class="btn btn-primary"
                            type="button"
                            data-bs-toggle="offcanvas"
                            data-bs-target="#offcanvasScrolling"
                            aria-controls="offcanvasScrolling"
                          >
                            Enable body scrolling
                          </button>
                          <button
                            class="btn btn-primary"
                            type="button"
                            data-bs-toggle="offcanvas"
                            data-bs-target="#offcanvasWithBackdrop"
                            aria-controls="offcanvasWithBackdrop"
                          >
                            Enable backdrop (default)
                          </button>
                          <button
                            class="btn btn-primary"
                            type="button"
                            data-bs-toggle="offcanvas"
                            data-bs-target="#offcanvasWithBothOptions"
                            aria-controls="offcanvasWithBothOptions"
                          >
                            Enable both scrolling & backdrop
                          </button>
                        </div>

                        <div
                          class="offcanvas offcanvas-start"
                          data-bs-scroll="true"
                          data-bs-backdrop="false"
                          tabindex="-1"
                          id="offcanvasScrolling"
                          aria-labelledby="offcanvasScrollingLabel"
                        >
                          <div class="offcanvas-header">
                            <h5
                              class="offcanvas-title"
                              id="offcanvasScrollingLabel"
                            >
                              Colored with scrolling
                            </h5>
                            <button
                              type="button"
                              class="btn-close text-reset"
                              data-bs-dismiss="offcanvas"
                              aria-label="Close"
                            ></button>
                          </div>
                          <div class="offcanvas-body">
                            <p>
                              Try scrolling the rest of the page to see this
                              option in action.
                            </p>
                          </div>
                        </div>
                        <div
                          class="offcanvas offcanvas-start"
                          tabindex="-1"
                          id="offcanvasWithBackdrop"
                          aria-labelledby="offcanvasWithBackdropLabel"
                        >
                          <div class="offcanvas-header">
                            <h5
                              class="offcanvas-title"
                              id="offcanvasWithBackdropLabel"
                            >
                              Offcanvas with backdrop
                            </h5>
                            <button
                              type="button"
                              class="btn-close text-reset"
                              data-bs-dismiss="offcanvas"
                              aria-label="Close"
                            ></button>
                          </div>
                          <div class="offcanvas-body">
                            <p>.....</p>
                          </div>
                        </div>
                        <div
                          class="offcanvas offcanvas-start"
                          data-bs-scroll="true"
                          tabindex="-1"
                          id="offcanvasWithBothOptions"
                          aria-labelledby="offcanvasWithBothOptionsLabel"
                        >
                          <div class="offcanvas-header">
                            <h5
                              class="offcanvas-title"
                              id="offcanvasWithBothOptionsLabel"
                            >
                              Backdroped with scrolling
                            </h5>
                            <button
                              type="button"
                              class="btn-close text-reset"
                              data-bs-dismiss="offcanvas"
                              aria-label="Close"
                            ></button>
                          </div>
                          <div class="offcanvas-body">
                            <p>
                              Try scrolling the rest of the page to see this
                              option in action.
                            </p>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->
                  </div>
                  <!-- End card-body -->
                </div>
                <!-- End card -->
              </div>
              <!-- End col -->
            </div>
            <!-- End row -->
            <!-- End Offcanvas -->

            <!-- Start Modals -->
            <div class="row">
              <div class="col-lg-12">
                <div class="card" id="modals">
                  <div class="card-body">
                    <h4 class="card-title mb-4">Modals</h4>

                    <div class="row">
                      <div class="col-lg-12">
                        <h5 class="font-size-14">Basic</h5>
                        <p class="card-title-desc">
                          Toggle a working modal demo by clicking the button
                          below. It will slide down and fade in from the top of
                          the page.
                        </p>

                        <button
                          type="button"
                          class="btn btn-primary waves-effect waves-light"
                          data-bs-toggle="modal"
                          data-bs-target="#myModal"
                        >
                          Standard modal
                        </button>
                        <!-- sample modal content -->
                        <div
                          id="myModal"
                          class="modal fade"
                          tabindex="-1"
                          role="dialog"
                          aria-labelledby="myModalLabel"
                          aria-hidden="true"
                        >
                          <div class="modal-dialog">
                            <div class="modal-content">
                              <div class="modal-header">
                                <h5 class="modal-title" id="myModalLabel">
                                  Modal Heading
                                </h5>
                                <button
                                  type="button"
                                  class="btn-close"
                                  data-bs-dismiss="modal"
                                  aria-label="Close"
                                ></button>
                              </div>
                              <div class="modal-body">
                                <h5 class="font-size-16">
                                  Overflowing text to show scroll behavior
                                </h5>
                                <p>
                                  Cras mattis consectetur purus sit amet
                                  fermentum. Cras justo odio, dapibus ac
                                  facilisis in, egestas eget quam. Morbi leo
                                  risus, porta ac consectetur ac, vestibulum at
                                  eros.
                                </p>
                                <p>
                                  Praesent commodo cursus magna, vel scelerisque
                                  nisl consectetur et. Vivamus sagittis lacus
                                  vel augue laoreet rutrum faucibus dolor
                                  auctor.
                                </p>
                                <p>
                                  Aenean lacinia bibendum nulla sed consectetur.
                                  Praesent commodo cursus magna, vel scelerisque
                                  nisl consectetur et. Donec sed odio dui. Donec
                                  ullamcorper nulla non metus auctor fringilla.
                                </p>
                                <p>
                                  Cras mattis consectetur purus sit amet
                                  fermentum. Cras justo odio, dapibus ac
                                  facilisis in, egestas eget quam. Morbi leo
                                  risus, porta ac consectetur ac, vestibulum at
                                  eros.
                                </p>
                                <p>
                                  Praesent commodo cursus magna, vel scelerisque
                                  nisl consectetur et. Vivamus sagittis lacus
                                  vel augue laoreet rutrum faucibus dolor
                                  auctor.
                                </p>
                                <p>
                                  Aenean lacinia bibendum nulla sed consectetur.
                                  Praesent commodo cursus magna, vel scelerisque
                                  nisl consectetur et. Donec sed odio dui. Donec
                                  ullamcorper nulla non metus auctor fringilla.
                                </p>
                                <p>
                                  Cras mattis consectetur purus sit amet
                                  fermentum. Cras justo odio, dapibus ac
                                  facilisis in, egestas eget quam. Morbi leo
                                  risus, porta ac consectetur ac, vestibulum at
                                  eros.
                                </p>
                              </div>
                              <div class="modal-footer">
                                <button
                                  type="button"
                                  class="btn btn-secondary waves-effect"
                                  data-bs-dismiss="modal"
                                >
                                  Close
                                </button>
                                <button
                                  type="button"
                                  class="btn btn-primary waves-effect waves-light"
                                >
                                  Save changes
                                </button>
                              </div>
                            </div>
                            <!-- /.modal-content -->
                          </div>
                          <!-- /.modal-dialog -->
                        </div>
                        <!-- /.modal -->
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->

                    <div class="row">
                      <div class="col-lg-6">
                        <div class="mt-4 pt-2">
                          <h5 class="font-size-14">Optional Sizes</h5>
                          <p class="card-title-desc">
                            Modals have three optional sizes, available via
                            modifier classes to be placed on a
                            <code>.modal-dialog</code>.
                          </p>

                          <div class="d-flex flex-wrap gap-2">
                            <!-- Extra Large modal -->
                            <button
                              type="button"
                              class="btn btn-primary waves-effect waves-light"
                              data-bs-toggle="modal"
                              data-bs-target=".bs-example-modal-xl"
                            >
                              Extra large Modal
                            </button>

                            <!-- Large modal -->
                            <button
                              type="button"
                              class="btn btn-success waves-effect waves-light"
                              data-bs-toggle="modal"
                              data-bs-target=".bs-example-modal-lg"
                            >
                              Large Modal
                            </button>

                            <!-- Small modal -->
                            <button
                              type="button"
                              class="btn btn-danger waves-effect waves-light"
                              data-bs-toggle="modal"
                              data-bs-target=".bs-example-modal-sm"
                            >
                              Small Modal
                            </button>

                            <!-- Full Screen  modal -->
                            <button
                              type="button"
                              class="btn btn-info waves-effect waves-light"
                              data-bs-toggle="modal"
                              data-bs-target=".bs-example-modal-fullscreen"
                            >
                              Full Screen Modal
                            </button>
                          </div>

                          <!--  Extra Large modal example -->
                          <div
                            class="modal fade bs-example-modal-xl"
                            tabindex="-1"
                            role="dialog"
                            aria-labelledby="myExtraLargeModalLabel"
                            aria-hidden="true"
                          >
                            <div class="modal-dialog modal-xl">
                              <div class="modal-content">
                                <div class="modal-header">
                                  <h5
                                    class="modal-title"
                                    id="myExtraLargeModalLabel"
                                  >
                                    Extra large modal
                                  </h5>
                                  <button
                                    type="button"
                                    class="btn-close"
                                    data-bs-dismiss="modal"
                                    aria-label="Close"
                                  ></button>
                                </div>
                                <div class="modal-body">
                                  <p>
                                    Cras mattis consectetur purus sit amet
                                    fermentum. Cras justo odio, dapibus ac
                                    facilisis in, egestas eget quam. Morbi leo
                                    risus, porta ac consectetur ac, vestibulum
                                    at eros.
                                  </p>
                                  <p>
                                    Praesent commodo cursus magna, vel
                                    scelerisque nisl consectetur et. Vivamus
                                    sagittis lacus vel augue laoreet rutrum
                                    faucibus dolor auctor.
                                  </p>
                                  <p class="mb-0">
                                    Aenean lacinia bibendum nulla sed
                                    consectetur. Praesent commodo cursus magna,
                                    vel scelerisque nisl consectetur et. Donec
                                    sed odio dui. Donec ullamcorper nulla non
                                    metus auctor fringilla.
                                  </p>
                                </div>
                              </div>
                              <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                          </div>
                          <!-- /.modal -->

                          <!--  Large modal example -->
                          <div
                            class="modal fade bs-example-modal-lg"
                            tabindex="-1"
                            role="dialog"
                            aria-labelledby="myLargeModalLabel"
                            aria-hidden="true"
                          >
                            <div class="modal-dialog modal-lg">
                              <div class="modal-content">
                                <div class="modal-header">
                                  <h5
                                    class="modal-title"
                                    id="myLargeModalLabel"
                                  >
                                    Large Modal
                                  </h5>
                                  <button
                                    type="button"
                                    class="btn-close"
                                    data-bs-dismiss="modal"
                                    aria-label="Close"
                                  ></button>
                                </div>
                                <div class="modal-body">
                                  <p>
                                    Cras mattis consectetur purus sit amet
                                    fermentum. Cras justo odio, dapibus ac
                                    facilisis in, egestas eget quam. Morbi leo
                                    risus, porta ac consectetur ac, vestibulum
                                    at eros.
                                  </p>
                                  <p>
                                    Praesent commodo cursus magna, vel
                                    scelerisque nisl consectetur et. Vivamus
                                    sagittis lacus vel augue laoreet rutrum
                                    faucibus dolor auctor.
                                  </p>
                                  <p class="mb-0">
                                    Aenean lacinia bibendum nulla sed
                                    consectetur. Praesent commodo cursus magna,
                                    vel scelerisque nisl consectetur et. Donec
                                    sed odio dui. Donec ullamcorper nulla non
                                    metus auctor fringilla.
                                  </p>
                                </div>
                              </div>
                              <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                          </div>
                          <!-- /.modal -->

                          <!--  Small modal example -->
                          <div
                            class="modal fade bs-example-modal-sm"
                            tabindex="-1"
                            role="dialog"
                            aria-labelledby="mySmallModalLabel"
                            aria-hidden="true"
                          >
                            <div class="modal-dialog modal-sm">
                              <div class="modal-content">
                                <div class="modal-header">
                                  <h5
                                    class="modal-title"
                                    id="mySmallModalLabel"
                                  >
                                    Small Modal
                                  </h5>
                                  <button
                                    type="button"
                                    class="btn-close"
                                    data-bs-dismiss="modal"
                                    aria-label="Close"
                                  ></button>
                                </div>
                                <div class="modal-body">
                                  <p>
                                    Cras mattis consectetur purus sit amet
                                    fermentum. Cras justo odio, dapibus ac
                                    facilisis in, egestas eget quam. Morbi leo
                                    risus, porta ac consectetur ac, vestibulum
                                    at eros.
                                  </p>
                                  <p>
                                    Praesent commodo cursus magna, vel
                                    scelerisque nisl consectetur et. Vivamus
                                    sagittis lacus vel augue laoreet rutrum
                                    faucibus dolor auctor.
                                  </p>
                                  <p class="mb-0">
                                    Aenean lacinia bibendum nulla sed
                                    consectetur. Praesent commodo cursus magna,
                                    vel scelerisque nisl consectetur et. Donec
                                    sed odio dui. Donec ullamcorper nulla non
                                    metus auctor fringilla.
                                  </p>
                                </div>
                              </div>
                              <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                          </div>
                          <!-- /.modal -->

                          <!--  Full Screen  modal example -->
                          <div
                            class="modal fade bs-example-modal-fullscreen"
                            tabindex="-1"
                            role="dialog"
                            aria-labelledby="myFullScreenModalLabel"
                            aria-hidden="true"
                          >
                            <div class="modal-dialog modal-fullscreen">
                              <div class="modal-content">
                                <div class="modal-header">
                                  <h5
                                    class="modal-title"
                                    id="myFullScreenModalLabel"
                                  >
                                    Full Screen modal
                                  </h5>
                                  <button
                                    type="button"
                                    class="btn-close"
                                    data-bs-dismiss="modal"
                                    aria-label="Close"
                                  ></button>
                                </div>
                                <div class="modal-body">
                                  <p>
                                    Cras mattis consectetur purus sit amet
                                    fermentum. Cras justo odio, dapibus ac
                                    facilisis in, egestas eget quam. Morbi leo
                                    risus, porta ac consectetur ac, vestibulum
                                    at eros.
                                  </p>
                                  <p>
                                    Praesent commodo cursus magna, vel
                                    scelerisque nisl consectetur et. Vivamus
                                    sagittis lacus vel augue laoreet rutrum
                                    faucibus dolor auctor.
                                  </p>
                                  <p class="mb-0">
                                    Aenean lacinia bibendum nulla sed
                                    consectetur. Praesent commodo cursus magna,
                                    vel scelerisque nisl consectetur et. Donec
                                    sed odio dui. Donec ullamcorper nulla non
                                    metus auctor fringilla.
                                  </p>
                                </div>
                                <div class="modal-footer">
                                  <button
                                    type="button"
                                    class="btn btn-secondary waves-effect"
                                    data-bs-dismiss="modal"
                                  >
                                    Close
                                  </button>
                                  <button
                                    type="button"
                                    class="btn btn-primary waves-effect waves-light"
                                  >
                                    Save changes
                                  </button>
                                </div>
                              </div>
                              <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                          </div>
                          <!-- /.modal -->
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-lg-6">
                        <div class="mt-4 pt-2">
                          <h5 class="font-size-14">Toggle Between Modals</h5>
                          <p class="card-title-desc">
                            Toggle between multiple modals with some clever
                            placement of the <code>data-bs-target</code> and
                            <code>data-bs-toggle</code> attributes.
                          </p>

                          <div>
                            <button
                              type="button"
                              class="btn btn-primary waves-effect waves-light"
                              data-bs-toggle="modal"
                              data-bs-target="#firstmodal"
                            >
                              Open First Modal
                            </button>
                            <!-- First modal dialog -->
                            <div
                              class="modal fade"
                              id="firstmodal"
                              aria-hidden="true"
                              aria-labelledby="exampleModalToggleLabel"
                              tabindex="-1"
                            >
                              <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                  <div class="modal-header">
                                    <h5
                                      class="modal-title"
                                      id="exampleModalToggleLabel"
                                    >
                                      Modal 1
                                    </h5>
                                    <button
                                      type="button"
                                      class="btn-close"
                                      data-bs-dismiss="modal"
                                      aria-label="Close"
                                    ></button>
                                  </div>
                                  <div class="modal-body">
                                    <p>
                                      Show a second modal and hide this one with
                                      the button below.
                                    </p>
                                  </div>
                                  <div class="modal-footer">
                                    <!-- Toogle to second dialog -->
                                    <button
                                      class="btn btn-primary"
                                      data-bs-target="#secondmodal"
                                      data-bs-toggle="modal"
                                      data-bs-dismiss="modal"
                                    >
                                      Open Second Modal
                                    </button>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <!-- Second modal dialog -->
                            <div
                              class="modal fade"
                              id="secondmodal"
                              aria-hidden="true"
                              aria-labelledby="exampleModalToggleLabel2"
                              tabindex="-1"
                            >
                              <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                  <div class="modal-header">
                                    <h5
                                      class="modal-title"
                                      id="exampleModalToggleLabel2"
                                    >
                                      Modal 2
                                    </h5>
                                    <button
                                      type="button"
                                      class="btn-close"
                                      data-bs-dismiss="modal"
                                      aria-label="Close"
                                    ></button>
                                  </div>
                                  <div class="modal-body">
                                    <p>
                                      Hide this modal and show the first with
                                      the button below.
                                    </p>
                                  </div>
                                  <div class="modal-footer">
                                    <!-- Toogle to first dialog, `data-bs-dismiss` attribute can be omitted - clicking on link will close dialog anyway -->
                                    <button
                                      class="btn btn-primary"
                                      data-bs-target="#firstmodal"
                                      data-bs-toggle="modal"
                                      data-bs-dismiss="modal"
                                    >
                                      Back to First
                                    </button>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->

                    <div class="row mt-3">
                      <div class="col-xl-4 col-md-6">
                        <div class="mt-4">
                          <h5 class="font-size-14">Vertically Centered</h5>
                          <p class="card-title-desc">
                            Add <code>.modal-dialog-centered</code> to
                            <code>.modal-dialog</code> to vertically center the
                            modal.
                          </p>
                        </div>

                        <!-- center modal -->
                        <button
                          type="button"
                          class="btn btn-primary waves-effect waves-light"
                          data-bs-toggle="modal"
                          data-bs-target=".bs-example-modal-center"
                        >
                          Center modal
                        </button>

                        <div
                          class="modal fade bs-example-modal-center"
                          tabindex="-1"
                          role="dialog"
                          aria-labelledby="mySmallModalLabel"
                          aria-hidden="true"
                        >
                          <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                              <div class="modal-header">
                                <h5 class="modal-title">Center Modal</h5>
                                <button
                                  type="button"
                                  class="btn-close"
                                  data-bs-dismiss="modal"
                                  aria-label="Close"
                                ></button>
                              </div>
                              <div class="modal-body">
                                <p>
                                  Cras mattis consectetur purus sit amet
                                  fermentum. Cras justo odio, dapibus ac
                                  facilisis in, egestas eget quam. Morbi leo
                                  risus, porta ac consectetur ac, vestibulum at
                                  eros.
                                </p>
                                <p>
                                  Praesent commodo cursus magna, vel scelerisque
                                  nisl consectetur et. Vivamus sagittis lacus
                                  vel augue laoreet rutrum faucibus dolor
                                  auctor.
                                </p>
                                <p class="mb-0">
                                  Aenean lacinia bibendum nulla sed consectetur.
                                  Praesent commodo cursus magna, vel scelerisque
                                  nisl consectetur et. Donec sed odio dui. Donec
                                  ullamcorper nulla non metus auctor fringilla.
                                </p>
                              </div>
                            </div>
                            <!-- /.modal-content -->
                          </div>
                          <!-- /.modal-dialog -->
                        </div>
                        <!-- /.modal -->
                      </div>
                      <!-- End col -->

                      <div class="col-xl-4 col-md-6">
                        <div class="mt-4">
                          <h5 class="font-size-14">Scrollable</h5>
                          <p class="card-title-desc">
                            You can also create a scrollable modal that allows
                            scroll the modal body by adding
                            <code>.modal-dialog-scrollable</code> to
                            <code>.modal-dialog</code>.
                          </p>

                          <div class="d-flex flex-wrap gap-2">
                            <!--Long Scrollable modal -->
                            <div>
                              <button
                                type="button"
                                class="btn btn-primary waves-effect waves-light"
                                data-bs-toggle="modal"
                                data-bs-target="#exampleModalLongScrollable"
                              >
                                Long Scrollable modal
                              </button>

                              <div
                                class="modal fade"
                                id="exampleModalLongScrollable"
                                tabindex="-1"
                                role="dialog"
                                aria-labelledby="exampleModalLongScrollableTitle"
                                aria-hidden="true"
                              >
                                <div class="modal-dialog">
                                  <div class="modal-content">
                                    <div class="modal-header">
                                      <h5
                                        class="modal-title"
                                        id="exampleModalLongScrollableTitle"
                                      >
                                        Scrollable Modal
                                      </h5>
                                      <button
                                        type="button"
                                        class="btn-close"
                                        data-bs-dismiss="modal"
                                        aria-label="Close"
                                      ></button>
                                    </div>
                                    <div class="modal-body">
                                      <p>
                                        Cras mattis consectetur purus sit amet
                                        fermentum. Cras justo odio, dapibus ac
                                        facilisis in, egestas eget quam. Morbi
                                        leo risus, porta ac consectetur ac,
                                        vestibulum at eros.
                                      </p>
                                      <p>
                                        Praesent commodo cursus magna, vel
                                        scelerisque nisl consectetur et. Vivamus
                                        sagittis lacus vel augue laoreet rutrum
                                        faucibus dolor auctor.
                                      </p>
                                      <p>
                                        Aenean lacinia bibendum nulla sed
                                        consectetur. Praesent commodo cursus
                                        magna, vel scelerisque nisl consectetur
                                        et. Donec sed odio dui. Donec
                                        ullamcorper nulla non metus auctor
                                        fringilla.
                                      </p>
                                      <p>
                                        Cras mattis consectetur purus sit amet
                                        fermentum. Cras justo odio, dapibus ac
                                        facilisis in, egestas eget quam. Morbi
                                        leo risus, porta ac consectetur ac,
                                        vestibulum at eros.
                                      </p>
                                      <p>
                                        Praesent commodo cursus magna, vel
                                        scelerisque nisl consectetur et. Vivamus
                                        sagittis lacus vel augue laoreet rutrum
                                        faucibus dolor auctor.
                                      </p>
                                      <p>
                                        Aenean lacinia bibendum nulla sed
                                        consectetur. Praesent commodo cursus
                                        magna, vel scelerisque nisl consectetur
                                        et. Donec sed odio dui. Donec
                                        ullamcorper nulla non metus auctor
                                        fringilla.
                                      </p>
                                      <p>
                                        Cras mattis consectetur purus sit amet
                                        fermentum. Cras justo odio, dapibus ac
                                        facilisis in, egestas eget quam. Morbi
                                        leo risus, porta ac consectetur ac,
                                        vestibulum at eros.
                                      </p>
                                      <p>
                                        Praesent commodo cursus magna, vel
                                        scelerisque nisl consectetur et. Vivamus
                                        sagittis lacus vel augue laoreet rutrum
                                        faucibus dolor auctor.
                                      </p>
                                      <p>
                                        Aenean lacinia bibendum nulla sed
                                        consectetur. Praesent commodo cursus
                                        magna, vel scelerisque nisl consectetur
                                        et. Donec sed odio dui. Donec
                                        ullamcorper nulla non metus auctor
                                        fringilla.
                                      </p>
                                      <p>
                                        Cras mattis consectetur purus sit amet
                                        fermentum. Cras justo odio, dapibus ac
                                        facilisis in, egestas eget quam. Morbi
                                        leo risus, porta ac consectetur ac,
                                        vestibulum at eros.
                                      </p>
                                      <p>
                                        Praesent commodo cursus magna, vel
                                        scelerisque nisl consectetur et. Vivamus
                                        sagittis lacus vel augue laoreet rutrum
                                        faucibus dolor auctor.
                                      </p>
                                      <p>
                                        Aenean lacinia bibendum nulla sed
                                        consectetur. Praesent commodo cursus
                                        magna, vel scelerisque nisl consectetur
                                        et. Donec sed odio dui. Donec
                                        ullamcorper nulla non metus auctor
                                        fringilla.
                                      </p>
                                      <p>
                                        Cras mattis consectetur purus sit amet
                                        fermentum. Cras justo odio, dapibus ac
                                        facilisis in, egestas eget quam. Morbi
                                        leo risus, porta ac consectetur ac,
                                        vestibulum at eros.
                                      </p>
                                      <p>
                                        Praesent commodo cursus magna, vel
                                        scelerisque nisl consectetur et. Vivamus
                                        sagittis lacus vel augue laoreet rutrum
                                        faucibus dolor auctor.
                                      </p>
                                      <p>
                                        Aenean lacinia bibendum nulla sed
                                        consectetur. Praesent commodo cursus
                                        magna, vel scelerisque nisl consectetur
                                        et. Donec sed odio dui. Donec
                                        ullamcorper nulla non metus auctor
                                        fringilla.
                                      </p>
                                      <p>
                                        Cras mattis consectetur purus sit amet
                                        fermentum. Cras justo odio, dapibus ac
                                        facilisis in, egestas eget quam. Morbi
                                        leo risus, porta ac consectetur ac,
                                        vestibulum at eros.
                                      </p>
                                      <p>
                                        Praesent commodo cursus magna, vel
                                        scelerisque nisl consectetur et. Vivamus
                                        sagittis lacus vel augue laoreet rutrum
                                        faucibus dolor auctor.
                                      </p>
                                      <p>
                                        Aenean lacinia bibendum nulla sed
                                        consectetur. Praesent commodo cursus
                                        magna, vel scelerisque nisl consectetur
                                        et. Donec sed odio dui. Donec
                                        ullamcorper nulla non metus auctor
                                        fringilla.
                                      </p>
                                    </div>
                                    <div class="modal-footer">
                                      <button
                                        type="button"
                                        class="btn btn-secondary"
                                        data-bs-dismiss="modal"
                                      >
                                        Close
                                      </button>
                                      <button
                                        type="button"
                                        class="btn btn-primary"
                                      >
                                        Save changes
                                      </button>
                                    </div>
                                  </div>
                                  <!-- /.modal-content -->
                                </div>
                                <!-- /.modal-dialog -->
                              </div>
                              <!-- /.modal -->
                            </div>

                            <div>
                              <button
                                type="button"
                                class="btn btn-primary waves-effect waves-light"
                                data-bs-toggle="modal"
                                data-bs-target="#exampleModalScrollable"
                              >
                                Scrollable modal
                              </button>

                              <div
                                class="modal fade"
                                id="exampleModalScrollable"
                                tabindex="-1"
                                role="dialog"
                                aria-labelledby="exampleModalScrollableTitle"
                                aria-hidden="true"
                              >
                                <div
                                  class="modal-dialog modal-dialog-scrollable"
                                >
                                  <div class="modal-content">
                                    <div class="modal-header">
                                      <h5
                                        class="modal-title"
                                        id="exampleModalScrollableTitle"
                                      >
                                        Scrollable Modal
                                      </h5>
                                      <button
                                        type="button"
                                        class="btn-close"
                                        data-bs-dismiss="modal"
                                        aria-label="Close"
                                      ></button>
                                    </div>
                                    <div class="modal-body">
                                      <p>
                                        Cras mattis consectetur purus sit amet
                                        fermentum. Cras justo odio, dapibus ac
                                        facilisis in, egestas eget quam. Morbi
                                        leo risus, porta ac consectetur ac,
                                        vestibulum at eros.
                                      </p>
                                      <p>
                                        Praesent commodo cursus magna, vel
                                        scelerisque nisl consectetur et. Vivamus
                                        sagittis lacus vel augue laoreet rutrum
                                        faucibus dolor auctor.
                                      </p>
                                      <p>
                                        Aenean lacinia bibendum nulla sed
                                        consectetur. Praesent commodo cursus
                                        magna, vel scelerisque nisl consectetur
                                        et. Donec sed odio dui. Donec
                                        ullamcorper nulla non metus auctor
                                        fringilla.
                                      </p>
                                      <p>
                                        Cras mattis consectetur purus sit amet
                                        fermentum. Cras justo odio, dapibus ac
                                        facilisis in, egestas eget quam. Morbi
                                        leo risus, porta ac consectetur ac,
                                        vestibulum at eros.
                                      </p>
                                      <p>
                                        Praesent commodo cursus magna, vel
                                        scelerisque nisl consectetur et. Vivamus
                                        sagittis lacus vel augue laoreet rutrum
                                        faucibus dolor auctor.
                                      </p>
                                      <p>
                                        Aenean lacinia bibendum nulla sed
                                        consectetur. Praesent commodo cursus
                                        magna, vel scelerisque nisl consectetur
                                        et. Donec sed odio dui. Donec
                                        ullamcorper nulla non metus auctor
                                        fringilla.
                                      </p>
                                      <p>
                                        Cras mattis consectetur purus sit amet
                                        fermentum. Cras justo odio, dapibus ac
                                        facilisis in, egestas eget quam. Morbi
                                        leo risus, porta ac consectetur ac,
                                        vestibulum at eros.
                                      </p>
                                      <p>
                                        Praesent commodo cursus magna, vel
                                        scelerisque nisl consectetur et. Vivamus
                                        sagittis lacus vel augue laoreet rutrum
                                        faucibus dolor auctor.
                                      </p>
                                      <p>
                                        Aenean lacinia bibendum nulla sed
                                        consectetur. Praesent commodo cursus
                                        magna, vel scelerisque nisl consectetur
                                        et. Donec sed odio dui. Donec
                                        ullamcorper nulla non metus auctor
                                        fringilla.
                                      </p>
                                      <p>
                                        Cras mattis consectetur purus sit amet
                                        fermentum. Cras justo odio, dapibus ac
                                        facilisis in, egestas eget quam. Morbi
                                        leo risus, porta ac consectetur ac,
                                        vestibulum at eros.
                                      </p>
                                      <p>
                                        Praesent commodo cursus magna, vel
                                        scelerisque nisl consectetur et. Vivamus
                                        sagittis lacus vel augue laoreet rutrum
                                        faucibus dolor auctor.
                                      </p>
                                      <p>
                                        Aenean lacinia bibendum nulla sed
                                        consectetur. Praesent commodo cursus
                                        magna, vel scelerisque nisl consectetur
                                        et. Donec sed odio dui. Donec
                                        ullamcorper nulla non metus auctor
                                        fringilla.
                                      </p>
                                      <p>
                                        Cras mattis consectetur purus sit amet
                                        fermentum. Cras justo odio, dapibus ac
                                        facilisis in, egestas eget quam. Morbi
                                        leo risus, porta ac consectetur ac,
                                        vestibulum at eros.
                                      </p>
                                      <p>
                                        Praesent commodo cursus magna, vel
                                        scelerisque nisl consectetur et. Vivamus
                                        sagittis lacus vel augue laoreet rutrum
                                        faucibus dolor auctor.
                                      </p>
                                      <p>
                                        Aenean lacinia bibendum nulla sed
                                        consectetur. Praesent commodo cursus
                                        magna, vel scelerisque nisl consectetur
                                        et. Donec sed odio dui. Donec
                                        ullamcorper nulla non metus auctor
                                        fringilla.
                                      </p>
                                      <p>
                                        Cras mattis consectetur purus sit amet
                                        fermentum. Cras justo odio, dapibus ac
                                        facilisis in, egestas eget quam. Morbi
                                        leo risus, porta ac consectetur ac,
                                        vestibulum at eros.
                                      </p>
                                      <p>
                                        Praesent commodo cursus magna, vel
                                        scelerisque nisl consectetur et. Vivamus
                                        sagittis lacus vel augue laoreet rutrum
                                        faucibus dolor auctor.
                                      </p>
                                      <p>
                                        Aenean lacinia bibendum nulla sed
                                        consectetur. Praesent commodo cursus
                                        magna, vel scelerisque nisl consectetur
                                        et. Donec sed odio dui. Donec
                                        ullamcorper nulla non metus auctor
                                        fringilla.
                                      </p>
                                    </div>
                                    <div class="modal-footer">
                                      <button
                                        type="button"
                                        class="btn btn-secondary"
                                        data-bs-dismiss="modal"
                                      >
                                        Close
                                      </button>
                                      <button
                                        type="button"
                                        class="btn btn-primary"
                                      >
                                        Save changes
                                      </button>
                                    </div>
                                  </div>
                                  <!-- /.modal-content -->
                                </div>
                                <!-- /.modal-dialog -->
                              </div>
                              <!-- /.modal -->
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-xl-4 col-md-6">
                        <div class="mt-4">
                          <h5 class="font-size-14">Static Backdrop</h5>
                          <p class="card-title-desc">
                            When backdrop is set to static, the modal will not
                            close when clicking outside it. Click the button
                            below to try it.
                          </p>

                          <!-- Button trigger modal -->
                          <button
                            type="button"
                            class="btn btn-primary waves-effect waves-light"
                            data-bs-toggle="modal"
                            data-bs-target="#staticBackdrop"
                          >
                            Static backdrop modal
                          </button>

                          <!-- staticBackdrop Modal -->
                          <div
                            class="modal fade"
                            id="staticBackdrop"
                            data-bs-backdrop="static"
                            data-bs-keyboard="false"
                            tabindex="-1"
                            role="dialog"
                            aria-labelledby="staticBackdropLabel"
                            aria-hidden="true"
                          >
                            <div
                              class="modal-dialog modal-dialog-centered"
                              role="document"
                            >
                              <div class="modal-content">
                                <div class="modal-header">
                                  <h5
                                    class="modal-title"
                                    id="staticBackdropLabel"
                                  >
                                    Modal title
                                  </h5>
                                  <button
                                    type="button"
                                    class="btn-close"
                                    data-bs-dismiss="modal"
                                    aria-label="Close"
                                  ></button>
                                </div>
                                <div class="modal-body">
                                  <p>
                                    I will not close if you click outside me.
                                    Don't even try to press escape key.
                                  </p>
                                </div>
                                <div class="modal-footer">
                                  <button
                                    type="button"
                                    class="btn btn-secondary"
                                    data-bs-dismiss="modal"
                                  >
                                    Close
                                  </button>
                                  <button type="button" class="btn btn-primary">
                                    Understood
                                  </button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->
                  </div>
                  <!-- End card-body -->
                </div>
                <!-- End card -->
              </div>
              <!-- End col -->
            </div>
            <!-- End row -->
            <!-- End Modal -->

            <!-- start pagination -->
            <div class="row">
              <div class="col-lg-12">
                <div class="card overflow-hidden" id="pagination">
                  <div class="card-body">
                    <h4 class="card-title mb-4">Pagination</h4>

                    <div class="row">
                      <div class="col-lg-6">
                        <div>
                          <h5 class="font-size-14">Basic</h5>
                          <p class="card-title-desc">
                            Pagination links indicate a series of related
                            content exists across multiple pages.
                          </p>

                          <nav aria-label="Page navigation example">
                            <ul class="pagination">
                              <li class="page-item disabled">
                                <a class="page-link" href="javascript: void(0);"
                                  >Previous</a
                                >
                              </li>
                              <li class="page-item">
                                <a class="page-link" href="javascript: void(0);"
                                  >1</a
                                >
                              </li>
                              <li class="page-item">
                                <a class="page-link" href="javascript: void(0);"
                                  >2</a
                                >
                              </li>
                              <li class="page-item">
                                <a class="page-link" href="javascript: void(0);"
                                  >3</a
                                >
                              </li>
                              <li class="page-item">
                                <a class="page-link" href="javascript: void(0);"
                                  >Next</a
                                >
                              </li>
                            </ul>
                          </nav>

                          <nav aria-label="Page navigation example">
                            <ul class="pagination mb-0">
                              <li class="page-item">
                                <a
                                  class="page-link"
                                  href="javascript: void(0);"
                                  aria-label="Previous"
                                >
                                  &laquo;
                                </a>
                              </li>
                              <li class="page-item">
                                <a class="page-link" href="javascript: void(0);"
                                  >1</a
                                >
                              </li>
                              <li class="page-item active">
                                <a class="page-link" href="javascript: void(0);"
                                  >2</a
                                >
                              </li>
                              <li class="page-item">
                                <a class="page-link" href="javascript: void(0);"
                                  >3</a
                                >
                              </li>
                              <li class="page-item">
                                <a
                                  class="page-link"
                                  href="javascript: void(0);"
                                  aria-label="Next"
                                >
                                  &raquo;
                                </a>
                              </li>
                            </ul>
                          </nav>
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-lg-6">
                        <div class="mt-4 mt-lg-0">
                          <h5 class="font-size-14">Custom</h5>
                          <p class="card-title-desc">
                            Add <code>.pagination-rounded</code> with
                            <code>.pagination</code> class for rounded
                            pagination.
                          </p>

                          <nav aria-label="Page navigation example">
                            <ul class="pagination pagination-rounded mb-0">
                              <li class="page-item">
                                <a
                                  class="page-link"
                                  href="javascript: void(0);"
                                  aria-label="Previous"
                                >
                                  <i class="mdi mdi-chevron-left"></i>
                                </a>
                              </li>
                              <li class="page-item">
                                <a class="page-link" href="javascript: void(0);"
                                  >1</a
                                >
                              </li>
                              <li class="page-item active">
                                <a class="page-link" href="javascript: void(0);"
                                  >2</a
                                >
                              </li>
                              <li class="page-item">
                                <a class="page-link" href="javascript: void(0);"
                                  >3</a
                                >
                              </li>
                              <li class="page-item">
                                <a
                                  class="page-link"
                                  href="javascript: void(0);"
                                  aria-label="Next"
                                >
                                  <i class="mdi mdi-chevron-right"></i>
                                </a>
                              </li>
                            </ul>
                          </nav>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->

                    <div class="row">
                      <div class="col-lg-6">
                        <div class="mt-4">
                          <h5 class="font-size-14">Sizing</h5>
                          <p class="card-title-desc">
                            Add <code>.pagination-lg</code> or
                            <code>.pagination-sm</code> for pagination
                            additional sizes.
                          </p>

                          <nav aria-label="Page navigation example">
                            <ul class="pagination pagination-lg">
                              <li class="page-item disabled">
                                <a
                                  class="page-link"
                                  href="javascript: void(0);"
                                  tabindex="-1"
                                  >Previous</a
                                >
                              </li>
                              <li class="page-item">
                                <a class="page-link" href="javascript: void(0);"
                                  >1</a
                                >
                              </li>
                              <li class="page-item">
                                <a class="page-link" href="javascript: void(0);"
                                  >2</a
                                >
                              </li>
                              <li class="page-item">
                                <a class="page-link" href="javascript: void(0);"
                                  >3</a
                                >
                              </li>
                              <li class="page-item">
                                <a class="page-link" href="javascript: void(0);"
                                  >Next</a
                                >
                              </li>
                            </ul>
                          </nav>

                          <nav aria-label="Page navigation example">
                            <ul class="pagination pagination-sm mb-0">
                              <li class="page-item disabled">
                                <a
                                  class="page-link"
                                  href="javascript: void(0);"
                                  tabindex="-1"
                                  >Previous</a
                                >
                              </li>
                              <li class="page-item">
                                <a class="page-link" href="javascript: void(0);"
                                  >1</a
                                >
                              </li>
                              <li class="page-item">
                                <a class="page-link" href="javascript: void(0);"
                                  >2</a
                                >
                              </li>
                              <li class="page-item">
                                <a class="page-link" href="javascript: void(0);"
                                  >3</a
                                >
                              </li>
                              <li class="page-item">
                                <a class="page-link" href="javascript: void(0);"
                                  >Next</a
                                >
                              </li>
                            </ul>
                          </nav>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->
                  </div>
                  <!-- End card-body -->
                </div>
                <!-- End card -->
              </div>
              <!-- End col -->
            </div>
            <!-- End row -->
            <!-- End pagination -->

            <!-- start Placeholder -->
            <div class="row">
              <div class="col-lg-12">
                <div class="card overflow-hidden" id="placeholder">
                  <div class="card-body">
                    <h4 class="card-title mb-4">Placeholder</h4>

                    <div class="row">
                      <div class="col-xl-12">
                        <h5 class="font-size-14">Basic</h5>
                        <p class="card-title-desc">
                          Use loading placeholders for your components or pages
                          to indicate something may still be loading
                        </p>

                        <div class="row">
                          <div class="col-xl-3 col-md-6">
                            <div class="card">
                              <img
                                src="../src/assets/images/media/img-1.jpg"
                                class="card-img-top"
                                alt="card img"
                              />

                              <div class="card-body">
                                <h5 class="card-title">Card title</h5>
                                <p class="card-text">
                                  Some quick example text to build on the card
                                  title and make up the bulk of the card's
                                  content.
                                </p>
                                <a href="#" class="btn btn-primary"
                                  >Go somewhere</a
                                >
                              </div>
                            </div>
                          </div>
                          <div class="col-xl-3 offset-xl-3 col-md-6">
                            <div class="card" aria-hidden="true">
                              <img
                                src="../src/assets/images/media/img-1.jpg"
                                class="card-img-top"
                                alt="card dummy img"
                              />
                              <div class="card-body">
                                <h5 class="card-title placeholder-glow">
                                  <span class="placeholder col-6"></span>
                                </h5>
                                <p class="card-text placeholder-glow">
                                  <span class="placeholder col-7"></span>
                                  <span class="placeholder col-4"></span>
                                  <span class="placeholder col-4"></span>
                                  <span class="placeholder col-6"></span>
                                </p>
                                <a
                                  href="#"
                                  tabindex="-1"
                                  class="btn btn-primary disabled placeholder col-6"
                                ></a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="row mt-3">
                      <div class="col-lg-6">
                        <div>
                          <div>
                            <h5 class="font-size-14">Width</h5>
                            <p class="card-title-desc">
                              You can change the <code>width</code> through grid
                              column classes, width utilities, or inline styles.
                            </p>
                            <div class="">
                              <span class="placeholder col-6"></span>
                              <span class="placeholder w-75"></span>
                              <span
                                class="placeholder"
                                style="width: 25%"
                              ></span>
                            </div>
                          </div>

                          <div class="mt-3">
                            <h5 class="font-size-14">Sizing</h5>
                            <p class="card-title-desc">
                              The size of <code>.placeholder</code>s are based
                              on the typographic style of the parent element.
                              Customize them with sizing modifiers:
                              <code>.placeholder-lg</code>,
                              <code>.placeholder-sm</code>, or
                              <code>.placeholder-xs</code>.
                            </p>
                            <div class="">
                              <span
                                class="placeholder col-12 placeholder-lg"
                              ></span>
                              <span class="placeholder col-12"></span>
                              <span
                                class="placeholder col-12 placeholder-sm"
                              ></span>
                              <span
                                class="placeholder col-12 placeholder-xs"
                              ></span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-lg-6">
                        <div class="mt-4 mt-lg-0">
                          <h5 class="font-size-14">Color</h5>
                          <p class="card-title-desc">
                            By default, the <code>placeholder</code> uses
                            <code>currentColor</code>. This can be overriden
                            with a custom color or utility class.
                          </p>

                          <div class="">
                            <span class="placeholder col-12 mb-3"></span>
                            <span
                              class="placeholder col-12 mb-3 bg-primary"
                            ></span>
                            <span
                              class="placeholder col-12 mb-3 bg-secondary"
                            ></span>
                            <span
                              class="placeholder col-12 mb-3 bg-success"
                            ></span>
                            <span
                              class="placeholder col-12 mb-3 bg-danger"
                            ></span>
                            <span
                              class="placeholder col-12 mb-3 bg-warning"
                            ></span>
                            <span
                              class="placeholder col-12 mb-3 bg-info"
                            ></span>
                            <span
                              class="placeholder col-12 mb-3 bg-light"
                            ></span>
                            <span class="placeholder col-12 bg-dark"></span>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->

                    <div class="row mt-3">
                      <div class="col-lg-6">
                        <div>
                          <h5 class="font-size-14">
                            Placeholder Glow Animation
                          </h5>
                          <p class="card-title-desc">
                            Animate placehodlers with
                            <code>.placeholder-glow</code> to better convey the
                            perception of something being
                            <em>actively</em> loaded.
                          </p>

                          <div>
                            <div class="placeholder-glow">
                              <span class="placeholder col-12"></span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-lg-6">
                        <div class="mt-4 mt-lg-0">
                          <h5 class="font-size-14">
                            Placeholder Wave Animation
                          </h5>
                          <p class="card-title-desc">
                            Animate placehodlers with
                            <code>.placeholder-wave</code> to better convey the
                            perception of something being
                            <em>actively</em> loaded.
                          </p>

                          <div class="placeholder-wave">
                            <span class="placeholder col-12"></span>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->
                  </div>
                  <!-- End card-body -->
                </div>
                <!-- End card -->
              </div>
              <!-- End col -->
            </div>
            <!-- End row -->
            <!-- End Placeholder -->

            <!-- start Progress -->
            <div class="row">
              <div class="col-lg-12">
                <div class="card" id="progress">
                  <div class="card-body">
                    <h4 class="card-title mb-4">Progress</h4>

                    <div class="row">
                      <div class="col-lg-6">
                        <div>
                          <h5 class="font-size-14">Basic</h5>
                          <p class="card-title-desc">
                            Progress components are built with two HTML
                            elements, some CSS to set the width, and a few
                            attributes.
                          </p>

                          <div>
                            <div class="progress mb-4">
                              <div
                                class="progress-bar bg-primary"
                                role="progressbar"
                                style="width: 25%"
                                aria-valuenow="25"
                                aria-valuemin="0"
                                aria-valuemax="100"
                              ></div>
                            </div>
                            <div class="progress mb-4">
                              <div
                                class="progress-bar bg-warning"
                                role="progressbar"
                                style="width: 50%"
                                aria-valuenow="50"
                                aria-valuemin="0"
                                aria-valuemax="100"
                              ></div>
                            </div>
                            <div class="progress mb-4">
                              <div
                                class="progress-bar bg-success"
                                role="progressbar"
                                style="width: 75%"
                                aria-valuenow="75"
                                aria-valuemin="0"
                                aria-valuemax="100"
                              ></div>
                            </div>
                            <div class="progress">
                              <div
                                class="progress-bar bg-danger"
                                role="progressbar"
                                style="width: 100%"
                                aria-valuenow="100"
                                aria-valuemin="0"
                                aria-valuemax="100"
                              ></div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-lg-6">
                        <div class="mt-4 mt-lg-0">
                          <h5 class="font-size-14">Heights</h5>
                          <p class="card-title-desc">
                            We only set a <code>height</code> value on the
                            <code>.progress-bar</code>, so if you change that
                            value the outer <code>.progress</code> will
                            automatically resize accordingly.
                          </p>

                          <div>
                            <div class="progress progress-sm mb-4">
                              <div
                                class="progress-bar bg-danger"
                                role="progressbar"
                                style="width: 25%"
                                aria-valuenow="25"
                                aria-valuemin="0"
                                aria-valuemax="100"
                              ></div>
                            </div>

                            <div class="progress progress-md mb-4">
                              <div
                                class="progress-bar bg-primary"
                                role="progressbar"
                                style="width: 47%"
                                aria-valuenow="47"
                                aria-valuemin="0"
                                aria-valuemax="100"
                              ></div>
                            </div>

                            <div class="progress progress-lg mb-4">
                              <div
                                class="progress-bar bg-warning"
                                role="progressbar"
                                style="width: 75%"
                                aria-valuenow="75"
                                aria-valuemin="0"
                                aria-valuemax="100"
                              ></div>
                            </div>

                            <div class="progress" style="height: 20px">
                              <div
                                class="progress-bar bg-info"
                                role="progressbar"
                                style="width: 64%"
                                aria-valuenow="64"
                                aria-valuemin="0"
                                aria-valuemax="100"
                              ></div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->

                    <div class="row mt-3">
                      <div class="col-lg-12">
                        <div class="mt-4">
                          <h5 class="font-size-14">Striped & Animated</h5>
                          <p class="card-title-desc">
                            Add <code>.progress-bar-striped</code> to any
                            <code>.progress-bar</code> to apply a stripe via CSS
                            gradient over the progress bar’s background color.
                          </p>

                          <div>
                            <div class="progress mb-4">
                              <div
                                class="progress-bar progress-bar-striped"
                                role="progressbar"
                                style="width: 10%"
                                aria-valuenow="10"
                                aria-valuemin="0"
                                aria-valuemax="100"
                              ></div>
                            </div>
                            <div class="progress mb-4">
                              <div
                                class="progress-bar progress-bar-striped progress-bar-animated bg-success"
                                role="progressbar"
                                style="width: 25%"
                                aria-valuenow="25"
                                aria-valuemin="0"
                                aria-valuemax="100"
                              ></div>
                            </div>
                            <div class="progress mb-4">
                              <div
                                class="progress-bar progress-bar-striped bg-info"
                                role="progressbar"
                                style="width: 50%"
                                aria-valuenow="50"
                                aria-valuemin="0"
                                aria-valuemax="100"
                              ></div>
                            </div>
                            <div class="progress mb-4">
                              <div
                                class="progress-bar progress-bar-striped bg-warning"
                                role="progressbar"
                                style="width: 75%"
                                aria-valuenow="75"
                                aria-valuemin="0"
                                aria-valuemax="100"
                              ></div>
                            </div>
                            <div class="progress">
                              <div
                                class="progress-bar progress-bar-striped progress-bar-animated bg-danger"
                                role="progressbar"
                                style="width: 100%"
                                aria-valuenow="100"
                                aria-valuemin="0"
                                aria-valuemax="100"
                              ></div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->
                  </div>
                  <!-- End card-body -->
                </div>
                <!-- End card -->
              </div>
              <!-- End col -->
            </div>
            <!-- End row -->
            <!-- End row -->

            <!-- Start Tooltip - popover -->
            <div class="row">
              <div class="col-lg-12">
                <div class="card" id="tooltip-popover">
                  <div class="card-body">
                    <h4 class="card-title mb-4">Tooltips & Popovers</h4>

                    <div class="row">
                      <div class="col-lg-12">
                        <h5 class="font-size-14">Tooltips</h5>
                        <p class="card-title-desc">
                          Hover over the links below to see tooltips.
                        </p>

                        <div class="d-flex flex-wrap gap-2">
                          <button
                            type="button"
                            class="btn btn-primary"
                            data-bs-toggle="tooltip"
                            data-bs-placement="top"
                            title="Tooltip on top"
                          >
                            Tooltip on top
                          </button>

                          <button
                            type="button"
                            class="btn btn-primary"
                            data-bs-toggle="tooltip"
                            data-bs-placement="right"
                            title="Tooltip on right"
                          >
                            Tooltip on right
                          </button>

                          <button
                            type="button"
                            class="btn btn-primary"
                            data-bs-toggle="tooltip"
                            data-bs-placement="bottom"
                            title="Tooltip on bottom"
                          >
                            Tooltip on bottom
                          </button>

                          <button
                            type="button"
                            class="btn btn-primary"
                            data-bs-toggle="tooltip"
                            data-bs-placement="left"
                            title="Tooltip on left"
                          >
                            Tooltip on left
                          </button>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->

                    <div class="row">
                      <div class="col-lg-12">
                        <div class="mt-4 pt-2">
                          <h5 class="font-size-14">Popovers</h5>
                          <p class="card-title-desc">
                            Add small overlay content, like those found in iOS,
                            to any element for housing secondary information.
                          </p>

                          <div class="d-flex flex-wrap gap-2">
                            <button
                              type="button"
                              class="btn btn-secondary waves-effect"
                              data-bs-toggle="popover"
                              data-bs-placement="top"
                              data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
                            >
                              Popover on top
                            </button>

                            <button
                              type="button"
                              class="btn btn-secondary waves-effect"
                              data-bs-toggle="popover"
                              data-bs-placement="right"
                              data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
                            >
                              Popover on right
                            </button>

                            <button
                              type="button"
                              class="btn btn-secondary waves-effect"
                              data-bs-toggle="popover"
                              data-bs-placement="bottom"
                              data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
                            >
                              Popover on bottom
                            </button>

                            <button
                              type="button"
                              class="btn btn-secondary waves-effect"
                              data-bs-toggle="popover"
                              data-bs-placement="left"
                              title="Popover Title"
                              data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
                            >
                              Popover on left
                            </button>

                            <button
                              type="button"
                              class="btn btn-success waves-effect waves-light"
                              data-bs-toggle="popover"
                              data-bs-trigger="focus"
                              title="Dismissible popover"
                              data-bs-content="And here's some amazing content. It's very engaging. Right?"
                            >
                              Dismissible popover
                            </button>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->
                  </div>
                  <!-- End card-body -->
                </div>
                <!-- End card -->
              </div>
              <!-- End col -->
            </div>
            <!-- End row -->
            <!-- End Tooltip - popover -->

            <!-- start spinner -->
            <div class="row">
              <div class="col-lg-12">
                <div class="card" id="spinner">
                  <div class="card-body">
                    <h4 class="card-title mb-4">Spinners</h4>

                    <div class="row">
                      <div class="col-lg-6">
                        <div>
                          <div>
                            <h5 class="font-size-14">Border</h5>
                            <p class="card-title-desc">
                              Use the border spinners for a lightweight loading
                              indicator.
                            </p>

                            <div>
                              <div
                                class="spinner-border text-primary m-1"
                                role="status"
                              >
                                <span class="sr-only">Loading...</span>
                              </div>
                            </div>
                          </div>

                          <div class="mt-4 pt-2">
                            <h5 class="font-size-14">Color Variation</h5>
                            <p class="card-title-desc">
                              Add <code>text-*</code> color for a Spinner color
                              variation.
                            </p>

                            <div>
                              <div
                                class="spinner-border text-primary m-1"
                                role="status"
                              >
                                <span class="sr-only">Loading...</span>
                              </div>
                              <div
                                class="spinner-border text-secondary m-1"
                                role="status"
                              >
                                <span class="sr-only">Loading...</span>
                              </div>
                              <div
                                class="spinner-border text-success m-1"
                                role="status"
                              >
                                <span class="sr-only">Loading...</span>
                              </div>
                              <div
                                class="spinner-border text-info m-1"
                                role="status"
                              >
                                <span class="sr-only">Loading...</span>
                              </div>
                              <div
                                class="spinner-border text-warning m-1"
                                role="status"
                              >
                                <span class="sr-only">Loading...</span>
                              </div>
                              <div
                                class="spinner-border text-danger m-1"
                                role="status"
                              >
                                <span class="sr-only">Loading...</span>
                              </div>
                              <div
                                class="spinner-border text-dark m-1"
                                role="status"
                              >
                                <span class="sr-only">Loading...</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->

                      <div class="col-lg-6">
                        <div class="mt-4 mt-lg-0">
                          <div>
                            <h5 class="font-size-14">Growing</h5>
                            <p class="card-title-desc">
                              Switch to the grow spinner.it does repeatedly grow
                              Continue!
                            </p>

                            <div>
                              <div
                                class="spinner-grow text-primary m-1"
                                role="status"
                              >
                                <span class="sr-only">Loading...</span>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="mt-4 pt-2">
                          <h5 class="font-size-14">Color Variation</h5>
                          <p class="card-title-desc">
                            Add <code>text-*</code> color for a Spinner color
                            variation.
                          </p>

                          <div>
                            <div
                              class="spinner-grow text-secondary m-1"
                              role="status"
                            >
                              <span class="sr-only">Loading...</span>
                            </div>
                            <div
                              class="spinner-grow text-success m-1"
                              role="status"
                            >
                              <span class="sr-only">Loading...</span>
                            </div>
                            <div
                              class="spinner-grow text-info m-1"
                              role="status"
                            >
                              <span class="sr-only">Loading...</span>
                            </div>
                            <div
                              class="spinner-grow text-warning m-1"
                              role="status"
                            >
                              <span class="sr-only">Loading...</span>
                            </div>
                            <div
                              class="spinner-grow text-danger m-1"
                              role="status"
                            >
                              <span class="sr-only">Loading...</span>
                            </div>
                            <div
                              class="spinner-grow text-dark m-1"
                              role="status"
                            >
                              <span class="sr-only">Loading...</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End col -->
                    </div>
                    <!-- End row -->
                  </div>
                  <!-- End card-body -->
                </div>
                <!-- End card -->
              </div>
              <!-- End col -->
            </div>
            <!-- End row -->
            <!-- End spinner -->
          </div>
          <!-- container -->
        </div>
        <!-- content -->

        <!-- Footer Start -->
        <footer class="footer">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-6">
                <div>
                  <script>
                    document.write(new Date().getFullYear());
                  </script>
                  © Dashtrap
                </div>
              </div>
              <div class="col-md-6">
                <div
                  class="d-none d-md-flex gap-4 align-item-center justify-content-md-end"
                >
                  <p class="mb-0">
                    Design & Develop by
                    <a href="https://myrathemes.com/" target="_blank"
                      >MyraStudio</a
                    >
                  </p>
                </div>
              </div>
            </div>
          </div>
        </footer>
        <!-- end Footer -->
      </div>
      <!-- End Page content -->
    </div>
    <!-- END wrapper -->

    <!-- App js -->
    <script src="../src/assets/js/vendor.min.js"></script>
    <script src="../src/assets/js/app.js"></script>
  </body>
</html>
